@planningcenter/tapestry 4.4.1-rc.2 → 4.4.1-rc.3

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 (5) hide show
  1. package/dist/reactRender.css +1161 -1161
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1161 -1161
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,1185 +677,1325 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
+ .tds-button-group{
681
+ display:inline-flex;
682
+ }
683
+ .tds-button-group > .tds-btn{
684
+ --tds-button-group-item-z-index:1;
680
685
 
681
- @media (prefers-reduced-motion: no-preference){
686
+ position:relative;
687
+ z-index:var(--tds-button-group-item-z-index);
688
+ border-radius:0;
689
+ }
690
+ :is(.tds-button-group > .tds-btn):not(:first-child){
691
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
692
+ }
693
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
694
+ position:absolute;
695
+ inset-block:calc(var(--tds-btn-border-width) * -1);
696
+ width:var(--tds-btn-border-width);
697
+ pointer-events:none;
698
+ content:"";
699
+ background-color:var(--t-border-color-white);
700
+ }
701
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
702
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
703
+ }
704
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
705
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
706
+ }
707
+ :is(.tds-button-group > .tds-btn):hover{
708
+ --tds-button-group-item-z-index:2;
709
+ }
710
+ :is(.tds-button-group > .tds-btn):focus-visible{
711
+ --tds-button-group-item-z-index:5;
712
+ }
713
+ .tds-button-group > .tds-btn:first-child{
714
+ border-start-start-radius:var(--tds-btn-border-radius);
715
+ border-end-start-radius:var(--tds-btn-border-radius);
716
+ }
717
+ .tds-button-group > .tds-btn:last-child{
718
+ border-start-end-radius:var(--tds-btn-border-radius);
719
+ border-end-end-radius:var(--tds-btn-border-radius);
720
+ }
682
721
 
683
- :root{
684
- interpolate-size:allow-keywords;
722
+ .tds-checkbox{
723
+ --tds-checkbox-font-size:var(--t-font-size-md);
724
+ --tds-checkbox-cursor:pointer;
725
+ --tds-checkbox-line-height:1.4;
726
+ --tds-checkbox-transition-property:background-color, border-color;
727
+
728
+ --tds-checkbox-input-size:var(--t-element-size-md);
729
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
730
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
731
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
732
+
733
+ --tds-checkbox-input-icon:none;
734
+ --tds-checkbox-input-icon-visibility:hidden;
735
+ --tds-checkbox-input-icon-opacity:0;
736
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
737
+
738
+ --tds-checkbox-label-color:var(--t-form-color);
739
+
740
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
741
+ --tds-checkbox-description-line-height:1.35;
742
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
743
+ --tds-checkbox-description-invalid-icon-display:none;
744
+
745
+ position:relative;
746
+ display:inline-grid;
747
+ grid-template-columns:auto;
748
+ grid-auto-columns:1fr;
749
+ gap:var(--t-spacing-fourth) 0;
750
+ line-height:var(--tds-checkbox-line-height);
751
+ -webkit-user-select:none;
752
+ -moz-user-select:none;
753
+ user-select:none;
685
754
  }
755
+
756
+ .tds-checkbox label{
757
+ grid-area:1 / 2;
758
+ padding-inline-start:var(--t-spacing-1);
759
+ font-size:var(--tds-checkbox-font-size);
760
+ font-weight:var(--t-font-weight-normal);
761
+ color:var(--tds-checkbox-label-color);
762
+ cursor:var(--tds-checkbox-cursor);
686
763
  }
687
764
 
688
- @layer tds-component{
689
- tds-sidenav,
690
- .tds-sidenav{
691
- --tds-sidenav-indent:12px;
692
- --tds-sidenav-item-depth:0;
765
+ .tds-checkbox tds-indeterminate{
766
+ display:flex;
767
+ }
693
768
 
694
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
769
+ .tds-checkbox input[type="checkbox"]{
770
+ position:relative;
771
+ width:1em;
772
+ height:1em;
773
+ margin:calc((1lh - 1em) / 2) 0 0;
774
+ font-size:var(--tds-checkbox-font-size);
775
+ line-height:inherit;
776
+ -webkit-appearance:none;
777
+ -moz-appearance:none;
778
+ appearance:none;
779
+ cursor:var(--tds-checkbox-cursor);
780
+ background-color:var(--tds-checkbox-input-background-color);
781
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
782
+ border-radius:var(--tds-checkbox-input-border-radius);
783
+ transition-timing-function:var(--t-ease-in-out);
784
+ transition-duration:var(--t-duration-200);
785
+ transition-property:var(--tds-checkbox-transition-property);
786
+ }
695
787
 
696
- --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;
697
- --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;
698
- --tds-sidenav-collapse-closed-opacity:0;
699
- --tds-sidenav-collapse-open-opacity:1;
700
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
701
- --tds-sidenav-collapse-open-transform:translateY(0);
788
+ :is(.tds-checkbox input[type="checkbox"])::before{
789
+ position:absolute;
790
+ top:50%;
791
+ left:50%;
792
+ visibility:var(--tds-checkbox-input-icon-visibility);
793
+ width:100%;
794
+ height:100%;
795
+ content:"";
796
+ background-color:var(--tds-checkbox-input-icon-fill);
797
+ border-radius:var(--tds-checkbox-input-border-radius);
798
+ opacity:var(--tds-checkbox-input-icon-opacity);
799
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
800
+ mask-image:var(--tds-checkbox-input-icon);
801
+ -webkit-mask-repeat:no-repeat;
802
+ mask-repeat:no-repeat;
803
+ -webkit-mask-size:contain;
804
+ mask-size:contain;
805
+ transform:translate(-50%, -50%);
806
+ }
702
807
 
703
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
704
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
705
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
706
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
808
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
809
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
810
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
811
+ }
707
812
 
708
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
709
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
710
- --tds-sidenav-item-nested-background-selected:transparent;
813
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
814
+ outline:var(--t-focus-ring-outline);
815
+ outline-offset:var(--t-focus-ring-offset);
816
+ }
711
817
 
712
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
713
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
714
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
818
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
819
+ pointer-events:none;
820
+ }
715
821
 
716
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
717
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
822
+ @media (prefers-reduced-motion: reduce){
823
+
824
+ .tds-checkbox input[type="checkbox"]{
825
+ --tds-checkbox-transition-property:none;
718
826
  }
827
+ }
719
828
 
720
- @media (prefers-reduced-motion: reduce){
721
- tds-sidenav,
722
- .tds-sidenav{
723
- --tds-sidenav-collapse-transition-enter:none;
724
- --tds-sidenav-collapse-transition-exit:none;
725
- --tds-sidenav-collapse-closed-transform:none;
726
- --tds-sidenav-collapse-open-transform:none;
829
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
830
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
831
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
832
+ --tds-checkbox-input-icon-visibility:visible;
833
+ --tds-checkbox-input-icon-opacity:1;
727
834
  }
835
+
836
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
837
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
838
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
728
839
  }
729
840
 
730
- .tds-sidenav--theme-gray{
731
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
732
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
733
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
734
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
735
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
841
+ .tds-checkbox:has(input:checked){
842
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
843
+ }
844
+
845
+ .tds-checkbox:has(input:indeterminate){
846
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
736
847
  }
848
+
849
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
850
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
851
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
852
+ --tds-checkbox-description-invalid-icon-display:inline-block;
853
+ }
854
+
855
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
856
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
857
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
858
+ }
859
+
860
+ :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{
861
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
862
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
863
+ }
864
+
865
+ :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){
866
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
867
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
868
+ }
869
+
870
+ .tds-checkbox:has(input:required) label::after{
871
+ margin-left:.25ch;
872
+ color:var(--t-text-color-status-error);
873
+ content:"*";
874
+ }
875
+
876
+ .tds-checkbox:has(input:disabled){
877
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
878
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
879
+
880
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
881
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
882
+ --tds-checkbox-cursor:not-allowed;
883
+ }
884
+
885
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
886
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
887
+ }
888
+
889
+ .tds-checkbox-description{
890
+ display:flex;
891
+ grid-area:2 / 2;
892
+ gap:var(--t-spacing-half);
893
+ align-items:flex-start;
894
+ padding-inline-start:var(--t-spacing-1);
895
+ margin:0;
896
+ font-size:var(--tds-checkbox-description-font-size);
897
+ line-height:var(--tds-checkbox-description-line-height);
898
+ color:var(--tds-checkbox-description-color);
899
+ cursor:text;
737
900
  }
738
901
 
739
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
740
- display:flex;
902
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
903
+ display:var(--tds-checkbox-description-invalid-icon-display);
904
+ flex-shrink:0;
905
+ margin-top:calc(.5lh - .5em);
906
+ line-height:var(--tds-checkbox-description-line-height);
907
+ }
908
+
909
+ .tds-checkbox--sm{
910
+ --tds-checkbox-line-height:1.35;
911
+ --tds-checkbox-input-size:var(--t-element-size-sm);
912
+ --tds-checkbox-font-size:var(--t-font-size-sm);
913
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
914
+ --tds-checkbox-description-line-height:1.3;
915
+ }
916
+
917
+
918
+ :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{
919
+ -webkit-appearance:none;
920
+ appearance:none;
921
+ }
922
+
923
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
924
+ inline-size:1em;
925
+ block-size:2em;
926
+ }
927
+ @supports (field-sizing: content){
928
+ .tds-input--auto-width{
929
+ inline-size:-moz-fit-content;
930
+ inline-size:fit-content;
931
+ min-inline-size:min(100%, 122px);
741
932
  }
742
933
 
743
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
744
- flex-direction:column;
745
- gap:var(--t-spacing-half);
746
- width:100%;
934
+ .tds-input--auto-width input{
935
+ field-sizing:content;
936
+ inline-size:auto;
747
937
  }
938
+ }
748
939
 
749
- .tds-sidenav-section-list{
750
- width:100%;
940
+ .tds-checkbox-group{
941
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
942
+ --tds-checkbox-group-line-height:1.4;
943
+ --tds-checkbox-group-gap:var(--t-spacing-1);
944
+
945
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
946
+ --tds-checkbox-group-description-line-height:1.35;
947
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
948
+ --tds-checkbox-group-description-invalid-icon-display:none;
949
+ display:flex;
950
+ flex-direction:column;
951
+ gap:0;
751
952
  padding:0;
752
953
  margin:0;
753
- list-style:none;
754
- }
755
954
 
756
- .tds-sidenav-section-header{
757
- display:flex;
758
- align-items:baseline;
759
- justify-content:space-between;
760
- padding-top:var(--t-spacing-2);
955
+ font-size:var(--tds-checkbox-group-font-size);
956
+ line-height:var(--tds-checkbox-group-line-height);
957
+ border:0;
761
958
  }
762
959
 
763
- .tds-sidenav-section-header h2{
960
+ .tds-checkbox-group legend{
961
+ float:left;
962
+ padding:0;
764
963
  margin:0;
765
- font-size:var(--t-font-size-sm);
766
- font-weight:var(--t-font-weight-semibold);
767
- line-height:1.35;
768
- color:var(--t-text-color-secondary);
769
- text-transform:uppercase;
770
964
  }
771
965
 
772
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
773
- padding-top:0;
966
+ .tds-checkbox-group[aria-invalid="true"]{
967
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
968
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
774
969
  }
775
970
 
776
- .tds-sidenav-section-header [slot="label-actions"]{
777
- display:flex;
778
- gap:var(--t-spacing-half);
779
- align-items:center;
780
- }
971
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
972
+ margin-left:.25ch;
973
+ color:var(--t-text-color-status-error);
974
+ content:"*";
975
+ }
781
976
 
782
- .tds-sidenav-section [slot="section-actions"]{
977
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
978
+ content:none;
979
+ }
980
+
981
+ .tds-checkbox-group-fields{
783
982
  display:flex;
784
- gap:12px;
785
- align-items:center;
786
- min-height:42px;
787
- padding:var(--t-spacing-1) 0;
983
+ flex-direction:column;
984
+ gap:var(--tds-checkbox-group-gap);
985
+ align-items:flex-start;
986
+ margin-top:var(--t-spacing-1);
788
987
  }
789
988
 
790
- .tds-sidenav-section-list,
791
- .tds-sidenav-item{
792
- width:100%;
793
- padding:0;
794
- margin:0;
989
+ .tds-checkbox-group-description{
990
+ display:flex;
991
+ gap:var(--t-spacing-half);
992
+ align-items:flex-start;
993
+ margin:var(--t-spacing-fourth) 0 0;
994
+ font-size:var(--tds-checkbox-group-description-font-size);
995
+ line-height:var(--tds-checkbox-group-description-line-height);
996
+ color:var(--tds-checkbox-group-description-color);
997
+ cursor:text;
795
998
  }
796
999
 
797
- .tds-sidenav-item :is(a,button){
798
- position:relative;
799
- display:flex;
800
- gap:12px;
801
- align-items:center;
802
- width:100%;
803
- padding:12px;
804
- overflow:hidden;
805
- font-size:var(--t-font-size-sm);
806
- line-height:18px;
807
- color:var(--t-text-color-headline);
808
- white-space:nowrap;
809
- text-decoration:none;
810
- -webkit-appearance:none;
811
- -moz-appearance:none;
812
- appearance:none;
813
- cursor:pointer;
814
- background-color:var(--tds-sidenav-item-background, transparent);
815
- border:0;
816
- border-radius:var(--t-border-radius);
817
- transition:var(--tds-sidenav-item-transition);
1000
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1001
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1002
+ flex-shrink:0;
1003
+ margin-top:calc(.5lh - .5em);
1004
+ line-height:var(--tds-checkbox-group-description-line-height);
818
1005
  }
819
1006
 
820
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
821
- display:block;
822
- flex:1;
823
- overflow:hidden;
824
- text-overflow:ellipsis;
825
- text-align:left;
826
- white-space:nowrap;
827
- }
1007
+ .tds-checkbox-group--sm{
1008
+ --tds-checkbox-group-line-height:1.35;
1009
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1010
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1011
+ --tds-checkbox-group-description-line-height:1.3;
1012
+ }
828
1013
 
829
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
830
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
831
- color:var(--t-text-color-headline);
832
- text-decoration:none;
833
- }
1014
+ .tds-modal-overlay{
1015
+ --tds-modal-min-margin-block:var(--t-spacing-3);
834
1016
 
835
- :is(.tds-sidenav-item :is(a,button)):active{
836
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
837
- }
1017
+ position:fixed;
1018
+ inset:0;
1019
+ z-index:1000;
1020
+ display:grid;
1021
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1022
+ justify-items:center;
1023
+ overflow-y:auto;
1024
+ background:hsl(0 0% 0% / 40%);
1025
+ }
838
1026
 
839
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
840
- overflow:hidden;
841
- color:var(--tds-sidenav-item-icon-color);
842
- }
1027
+ .tds-modal-overlay[data-entering]{
1028
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1029
+ }
843
1030
 
844
- :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{
845
- display:block;
846
- width:var(--tds-sidenav-item-icon-size);
847
- height:var(--tds-sidenav-item-icon-size);
848
- }
1031
+ .tds-modal-overlay[data-exiting]{
1032
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1033
+ }
849
1034
 
850
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
851
- --tds-sidenav-indent:19px;
852
- }
1035
+ @keyframes tds-modal-overlay-fade{
1036
+ from{
1037
+ opacity:0;
1038
+ }
1039
+ }
853
1040
 
854
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
855
- visibility:visible;
856
- block-size:auto;
857
- opacity:1;
858
- }
1041
+ .tds-modal-frame{
1042
+ --tds-modal-width:600px;
1043
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1044
+ display:flex;
859
1045
 
860
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
861
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
862
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1046
+ grid-row:2;
1047
+ justify-content:center;
1048
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1049
+ }
863
1050
 
864
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
865
- font-weight:var(--t-font-weight-semibold);
1051
+ .tds-modal-frame[data-entering]{
1052
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
866
1053
  }
867
1054
 
868
- .tds-sidenav-item:has(.tds-sidenav-section){
869
- display:flex;
870
- flex-direction:column;
871
- gap:var(--t-spacing-half);
1055
+ .tds-modal-frame[data-exiting]{
1056
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
872
1057
  }
873
1058
 
874
- .tds-sidenav-item .tds-sidenav-section-list{
875
- --tds-sidenav-item-depth:1;
876
- gap:0;
877
- }
1059
+ .tds-modal-frame--sm{
1060
+ --tds-modal-width:400px;
1061
+ }
878
1062
 
879
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
880
- visibility:hidden;
881
- block-size:0;
882
- overflow-y:clip;
883
- opacity:0;
884
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
885
- }
1063
+ .tds-modal-frame--lg{
1064
+ --tds-modal-width:800px;
1065
+ }
886
1066
 
887
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
888
- --tds-sidenav-item-depth:2;
889
- }
1067
+ .tds-modal-frame--xl{
1068
+ --tds-modal-width:1000px;
1069
+ }
890
1070
 
891
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
892
- min-height:var(--t-element-size-2xl);
893
- padding-block:9px;
894
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
895
- line-height:1;
896
- background-color:transparent;
897
- }
1071
+ @keyframes tds-modal-zoom{
1072
+ from{
1073
+ opacity:0;
1074
+ scale:.96;
1075
+ }
1076
+ }
898
1077
 
899
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
900
- position:absolute;
901
- top:0;
902
- bottom:0;
903
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
904
- width:2px;
905
- content:"";
906
- background-color:var(--tds-sidenav-item-nested-border-color);
907
- transition:var(--tds-sidenav-item-transition);
908
- }
1078
+ @media (prefers-reduced-motion: reduce){
1079
+ .tds-modal-overlay[data-entering],
1080
+ .tds-modal-overlay[data-exiting],
1081
+ .tds-modal-frame[data-entering],
1082
+ .tds-modal-frame[data-exiting]{
1083
+ animation:none;
1084
+ }
1085
+ }
1086
+
1087
+ .tds-modal{
1088
+ display:flex;
1089
+ flex-direction:column;
1090
+ width:100%;
1091
+ padding-block-start:var(--t-spacing-3);
1092
+ padding-inline:0;
1093
+ background:var(--t-surface-color-card);
1094
+
1095
+ border:0;
1096
+ border-radius:var(--t-border-radius-lg);
1097
+ box-shadow:0 4px 18px 0 #0003;
1098
+ }
909
1099
 
910
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
911
- position:absolute;
912
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
913
- z-index:-1;
914
- height:100%;
915
- content:"";
916
- background-color:var(--tds-sidenav-item-nested-background);
917
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
918
- transition:var(--tds-sidenav-item-transition);
919
- }
1100
+ .tds-modal:focus{
1101
+ outline:none;
1102
+ }
920
1103
 
921
- :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)){
922
- display:block;
923
- text-align:left;
924
- white-space:normal;
925
- }
1104
+ .tds-modal-header{
1105
+ display:grid;
1106
+ grid-template-columns:1fr auto;
1107
+ -moz-column-gap:var(--t-spacing-2);
1108
+ column-gap:var(--t-spacing-2);
1109
+ padding-block:0;
1110
+ padding-inline:var(--t-spacing-4);
1111
+ }
926
1112
 
927
- :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{
928
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
929
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
930
- }
1113
+ .tds-modal-title{
1114
+ grid-row:1;
1115
+ grid-column:1;
1116
+ margin:0;
1117
+ font-size:var(--t-font-size-2xl);
1118
+ font-weight:var(--t-font-weight-medium);
1119
+ line-height:140%;
1120
+ color:var(--t-text-color-headline);
1121
+ }
931
1122
 
932
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
933
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
934
- }
1123
+ .tds-modal-subtitle{
1124
+ grid-row:2;
1125
+ grid-column:1;
1126
+ margin:0;
1127
+ font-size:var(--t-font-size-md);
1128
+ font-weight:var(--t-font-weight-medium);
1129
+ line-height:140%;
1130
+ color:var(--t-text-color-secondary);
1131
+ }
935
1132
 
936
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
937
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
938
- font-weight:var(--t-font-weight-medium);
939
- }
1133
+ .tds-modal-close{
1134
+ grid-row:1;
1135
+ grid-column:2;
1136
+ align-self:center;
1137
+ color:var(--t-icon-color-dim);
1138
+ }
940
1139
 
941
- .tds-sidenav-responsive-header{
1140
+ .tds-modal-body{
1141
+ padding-block:var(--t-spacing-3);
1142
+ padding-inline:var(--t-spacing-4);
1143
+ }
1144
+
1145
+ .tds-modal-body--full-width{
1146
+ padding-inline:0;
1147
+ }
1148
+
1149
+ .tds-modal-footer{
942
1150
  display:flex;
943
1151
  gap:var(--t-spacing-2);
944
1152
  align-items:center;
945
- width:100%;
1153
+ justify-content:flex-end;
1154
+ padding-block:var(--t-spacing-3);
1155
+ padding-inline:var(--t-spacing-4);
1156
+ border-top:1px solid var(--t-border-color);
946
1157
  }
947
1158
 
948
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
949
- order:0;
950
- }
1159
+ .tds-modal-footer > [slot="start"]{
1160
+ margin-inline-end:auto;
1161
+ }
951
1162
 
952
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
953
- flex:1;
954
- order:1;
955
- margin:0;
956
- font-size:var(--t-font-size-lg);
957
- font-weight:var(--t-font-weight-medium);
958
- color:var(--t-text-color-headline);
1163
+ @media (min-width: 720px){
1164
+ .tds-modal-overlay{
1165
+ --tds-modal-min-margin-block:0;
959
1166
  }
960
1167
 
961
- @media (max-width: 719px){
962
- .tds-sidenav-collapse{
963
- z-index:10001;
964
- display:none;
965
- max-width:min(448px, calc(100vw - 48px));
966
- padding:0;
967
- margin:12px 0;
968
- position-area:bottom span-right;
969
- overflow:hidden;
970
- outline:0;
1168
+ .tds-modal-footer{
1169
+ position:sticky;
1170
+ bottom:0;
971
1171
  background:var(--t-surface-color-card);
972
- border:0;
973
- border-radius:6px;
974
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
975
- opacity:var(--tds-sidenav-collapse-open-opacity);
976
- transform:var(--tds-sidenav-collapse-open-transform);
977
- transition:var(--tds-sidenav-collapse-transition-enter);
978
- will-change:transform;
1172
+ border-end-start-radius:var(--t-border-radius-lg);
1173
+ border-end-end-radius:var(--t-border-radius-lg);
979
1174
  }
1175
+ }
980
1176
 
981
- .tds-sidenav-scroll-container{
982
- --webkit-overflow-scrolling:touch;
983
- display:block;
984
- width:100%;
985
- height:-moz-fit-content;
986
- height:fit-content;
987
- padding:var(--t-spacing-2);
988
- overflow-y:auto;
1177
+ .tds-radio-group{
1178
+ --tds-radio-group-font-size:var(--t-font-size-md);
1179
+ --tds-radio-group-line-height:1.4;
1180
+ --tds-radio-group-gap:var(--t-spacing-1);
1181
+
1182
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1183
+ --tds-radio-group-description-line-height:1.35;
1184
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1185
+ --tds-radio-group-description-invalid-icon-display:none;
1186
+ display:flex;
1187
+ flex-direction:column;
1188
+ gap:0;
1189
+ padding:0;
1190
+ margin:0;
1191
+
1192
+ font-size:var(--tds-radio-group-font-size);
1193
+ line-height:var(--tds-radio-group-line-height);
1194
+ border:0;
1195
+ }
1196
+
1197
+ .tds-radio-group legend{
1198
+ float:left;
1199
+ padding:0;
1200
+ margin:0;
989
1201
  }
990
1202
 
991
- .tds-sidenav-item :is(a, button) :is(.prefix){
992
- display:none;
1203
+ .tds-radio-group[aria-invalid="true"]{
1204
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1205
+ --tds-radio-group-description-invalid-icon-display:inline-block;
993
1206
  }
994
- @supports selector(:popover-open){
995
- .tds-sidenav-collapse:popover-open{
996
- display:flex;
997
- }
998
1207
 
999
- .tds-sidenav-collapse:not(:popover-open){
1000
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1001
- transition:var(--tds-sidenav-collapse-transition-exit);
1208
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1209
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1002
1210
  }
1003
1211
 
1004
- @starting-style{
1005
- .tds-sidenav-collapse:popover-open{
1006
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1007
- transform:var(--tds-sidenav-collapse-closed-transform);
1212
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1213
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1214
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1008
1215
  }
1009
- }
1010
- }
1011
- @supports not selector(:popover-open){
1012
- .tds-sidenav-collapse.\:popover-open{
1013
- display:flex;
1014
- }
1015
1216
 
1016
- .tds-sidenav-collapse:not(.\:popover-open){
1017
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1018
- transition:var(--tds-sidenav-collapse-transition-exit);
1217
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1218
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1219
+ }
1220
+
1221
+ .tds-radio-group:has(input:required) legend::after{
1222
+ margin-left:.25ch;
1223
+ color:var(--t-text-color-status-error);
1224
+ content:"*";
1019
1225
  }
1020
- }
1021
- }
1022
1226
 
1023
- @media (min-width: 720px){
1024
- .tds-sidenav-responsive-header{
1025
- display:none;
1026
- }
1227
+ .tds-radio-group-fields{
1228
+ display:flex;
1229
+ flex-direction:column;
1230
+ gap:var(--tds-radio-group-gap);
1231
+ align-items:flex-start;
1232
+ margin-top:var(--t-spacing-1);
1027
1233
  }
1028
1234
 
1029
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1030
- display:none;
1031
- }
1032
-
1033
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1034
- display:block;
1035
- }
1235
+ .tds-radio-group-description{
1236
+ display:flex;
1237
+ gap:var(--t-spacing-half);
1238
+ align-items:flex-start;
1239
+ margin:var(--t-spacing-fourth) 0 0;
1240
+ font-size:var(--tds-radio-group-description-font-size);
1241
+ line-height:var(--tds-radio-group-description-line-height);
1242
+ color:var(--tds-radio-group-description-color);
1243
+ cursor:text;
1244
+ }
1036
1245
 
1037
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1038
- display:flex;
1039
- flex-direction:column;
1040
- }
1246
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1247
+ display:var(--tds-radio-group-description-invalid-icon-display);
1248
+ flex-shrink:0;
1249
+ margin-top:calc(.5lh - .5em);
1250
+ line-height:var(--tds-radio-group-description-line-height);
1251
+ }
1041
1252
 
1042
- .tds-checkbox{
1043
- --tds-checkbox-font-size:var(--t-font-size-md);
1044
- --tds-checkbox-cursor:pointer;
1045
- --tds-checkbox-line-height:1.4;
1046
- --tds-checkbox-transition-property:background-color, border-color;
1253
+ .tds-radio-group--sm{
1254
+ --tds-radio-group-line-height:1.35;
1255
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1256
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1257
+ --tds-radio-group-description-line-height:1.3;
1258
+ }
1047
1259
 
1048
- --tds-checkbox-input-size:var(--t-element-size-md);
1049
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1050
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1051
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1260
+ .tds-radio{
1261
+ --tds-radio-font-size:var(--t-font-size-md);
1262
+ --tds-radio-cursor:pointer;
1263
+ --tds-radio-line-height:1.4;
1264
+ --tds-radio-transition-property:border-width;
1052
1265
 
1053
- --tds-checkbox-input-icon:none;
1054
- --tds-checkbox-input-icon-visibility:hidden;
1055
- --tds-checkbox-input-icon-opacity:0;
1056
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1266
+ --tds-radio-input-size:var(--t-element-size-md);
1267
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1268
+ --tds-radio-input-border-color:var(--t-form-border-color);
1269
+ --tds-radio-input-border-width:var(--t-form-border-width);
1270
+ --tds-radio-input-background-color:var(--t-form-background-color);
1057
1271
 
1058
- --tds-checkbox-label-color:var(--t-form-color);
1272
+ --tds-radio-label-color:var(--t-form-color);
1059
1273
 
1060
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1061
- --tds-checkbox-description-line-height:1.35;
1062
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1063
- --tds-checkbox-description-invalid-icon-display:none;
1274
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1275
+ --tds-radio-description-line-height:1.35;
1276
+ --tds-radio-description-color:var(--t-text-color-secondary);
1064
1277
 
1065
1278
  position:relative;
1066
1279
  display:inline-grid;
1067
1280
  grid-template-columns:auto;
1068
1281
  grid-auto-columns:1fr;
1069
1282
  gap:var(--t-spacing-fourth) 0;
1070
- line-height:var(--tds-checkbox-line-height);
1283
+ line-height:var(--tds-radio-line-height);
1071
1284
  -webkit-user-select:none;
1072
1285
  -moz-user-select:none;
1073
1286
  user-select:none;
1074
1287
  }
1075
1288
 
1076
- .tds-checkbox label{
1289
+ .tds-radio label{
1077
1290
  grid-area:1 / 2;
1078
1291
  padding-inline-start:var(--t-spacing-1);
1079
- font-size:var(--tds-checkbox-font-size);
1292
+ font-size:var(--tds-radio-font-size);
1080
1293
  font-weight:var(--t-font-weight-normal);
1081
- color:var(--tds-checkbox-label-color);
1082
- cursor:var(--tds-checkbox-cursor);
1083
- }
1084
-
1085
- .tds-checkbox tds-indeterminate{
1086
- display:flex;
1294
+ color:var(--tds-radio-label-color);
1295
+ cursor:var(--tds-radio-cursor);
1087
1296
  }
1088
1297
 
1089
- .tds-checkbox input[type="checkbox"]{
1298
+ .tds-radio input[type="radio"]{
1090
1299
  position:relative;
1091
1300
  width:1em;
1092
1301
  height:1em;
1093
1302
  margin:calc((1lh - 1em) / 2) 0 0;
1094
- font-size:var(--tds-checkbox-font-size);
1303
+ font-size:var(--tds-radio-font-size);
1095
1304
  line-height:inherit;
1096
1305
  -webkit-appearance:none;
1097
1306
  -moz-appearance:none;
1098
1307
  appearance:none;
1099
- cursor:var(--tds-checkbox-cursor);
1100
- background-color:var(--tds-checkbox-input-background-color);
1101
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1102
- border-radius:var(--tds-checkbox-input-border-radius);
1308
+ cursor:var(--tds-radio-cursor);
1309
+ background-color:var(--tds-radio-input-background-color);
1310
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1311
+ border-radius:var(--tds-radio-input-border-radius);
1103
1312
  transition-timing-function:var(--t-ease-in-out);
1104
1313
  transition-duration:var(--t-duration-200);
1105
- transition-property:var(--tds-checkbox-transition-property);
1314
+ transition-property:var(--tds-radio-transition-property);
1106
1315
  }
1107
1316
 
1108
- :is(.tds-checkbox input[type="checkbox"])::before{
1109
- position:absolute;
1110
- top:50%;
1111
- left:50%;
1112
- visibility:var(--tds-checkbox-input-icon-visibility);
1113
- width:100%;
1114
- height:100%;
1115
- content:"";
1116
- background-color:var(--tds-checkbox-input-icon-fill);
1117
- border-radius:var(--tds-checkbox-input-border-radius);
1118
- opacity:var(--tds-checkbox-input-icon-opacity);
1119
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1120
- mask-image:var(--tds-checkbox-input-icon);
1121
- -webkit-mask-repeat:no-repeat;
1122
- mask-repeat:no-repeat;
1123
- -webkit-mask-size:contain;
1124
- mask-size:contain;
1125
- transform:translate(-50%, -50%);
1126
- }
1127
-
1128
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1129
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1130
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1317
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1318
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1319
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1131
1320
  }
1132
1321
 
1133
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1322
+ :is(.tds-radio input[type="radio"]):focus-visible{
1134
1323
  outline:var(--t-focus-ring-outline);
1135
1324
  outline-offset:var(--t-focus-ring-offset);
1136
1325
  }
1137
1326
 
1138
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1327
+ :is(.tds-radio input[type="radio"]):disabled{
1139
1328
  pointer-events:none;
1140
1329
  }
1141
1330
 
1142
1331
  @media (prefers-reduced-motion: reduce){
1143
1332
 
1144
- .tds-checkbox input[type="checkbox"]{
1145
- --tds-checkbox-transition-property:none;
1333
+ .tds-radio input[type="radio"]{
1334
+ --tds-radio-transition-property:none;
1146
1335
  }
1147
1336
  }
1148
1337
 
1149
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1150
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1151
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1152
- --tds-checkbox-input-icon-visibility:visible;
1153
- --tds-checkbox-input-icon-opacity:1;
1338
+ .tds-radio:has(input:checked){
1339
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1340
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1341
+ --tds-radio-input-border-width:4px;
1154
1342
  }
1155
1343
 
1156
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1157
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1158
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1344
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1345
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1346
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1159
1347
  }
1160
1348
 
1161
- .tds-checkbox:has(input:checked){
1162
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1163
- }
1164
-
1165
- .tds-checkbox:has(input:indeterminate){
1166
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1167
- }
1168
-
1169
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1170
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1171
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1172
- --tds-checkbox-description-invalid-icon-display:inline-block;
1349
+ .tds-radio:has(input:user-invalid){
1350
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1173
1351
  }
1174
1352
 
1175
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1176
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1177
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1178
- }
1179
-
1180
- :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{
1181
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1182
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1183
- }
1184
-
1185
- :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){
1186
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1187
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1188
- }
1189
-
1190
- .tds-checkbox:has(input:required) label::after{
1191
- margin-left:.25ch;
1192
- color:var(--t-text-color-status-error);
1193
- content:"*";
1353
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1354
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1355
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1194
1356
  }
1195
1357
 
1196
- .tds-checkbox:has(input:disabled){
1197
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1198
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1358
+ .tds-radio:has(input:disabled){
1359
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1360
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1199
1361
 
1200
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1201
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1202
- --tds-checkbox-cursor:not-allowed;
1362
+ --tds-radio-label-color:var(--t-form-color-disabled);
1363
+ --tds-radio-description-color:var(--t-form-color-disabled);
1364
+ --tds-radio-cursor:not-allowed;
1203
1365
  }
1204
1366
 
1205
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1206
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1367
+ .tds-radio:has(input:disabled) input:checked{
1368
+ --tds-radio-input-background-color:var(--t-form-background-color);
1369
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1207
1370
  }
1208
1371
 
1209
- .tds-checkbox-description{
1372
+ .tds-radio-description{
1210
1373
  display:flex;
1211
1374
  grid-area:2 / 2;
1212
1375
  gap:var(--t-spacing-half);
1213
1376
  align-items:flex-start;
1214
1377
  padding-inline-start:var(--t-spacing-1);
1215
1378
  margin:0;
1216
- font-size:var(--tds-checkbox-description-font-size);
1217
- line-height:var(--tds-checkbox-description-line-height);
1218
- color:var(--tds-checkbox-description-color);
1379
+ font-size:var(--tds-radio-description-font-size);
1380
+ line-height:var(--tds-radio-description-line-height);
1381
+ color:var(--tds-radio-description-color);
1219
1382
  cursor:text;
1220
1383
  }
1221
1384
 
1222
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1223
- display:var(--tds-checkbox-description-invalid-icon-display);
1224
- flex-shrink:0;
1225
- margin-top:calc(.5lh - .5em);
1226
- line-height:var(--tds-checkbox-description-line-height);
1227
- }
1228
-
1229
- .tds-checkbox--sm{
1230
- --tds-checkbox-line-height:1.35;
1231
- --tds-checkbox-input-size:var(--t-element-size-sm);
1232
- --tds-checkbox-font-size:var(--t-font-size-sm);
1233
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1234
- --tds-checkbox-description-line-height:1.3;
1385
+ .tds-radio--sm{
1386
+ --tds-radio-line-height:1.35;
1387
+ --tds-radio-input-size:var(--t-element-size-sm);
1388
+ --tds-radio-font-size:var(--t-font-size-sm);
1389
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1390
+ --tds-radio-description-line-height:1.3;
1235
1391
  }
1236
1392
 
1237
- .tds-checkbox-group{
1238
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1239
- --tds-checkbox-group-line-height:1.4;
1240
- --tds-checkbox-group-gap:var(--t-spacing-1);
1393
+ .tds-input:has(textarea){
1394
+ --tds-input-padding-block:6px;
1395
+ --tds-input-resizer-size:var(--t-element-size-sm);
1396
+ --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");
1397
+ }
1241
1398
 
1242
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1243
- --tds-checkbox-group-description-line-height:1.35;
1244
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1245
- --tds-checkbox-group-description-invalid-icon-display:none;
1246
- display:flex;
1247
- flex-direction:column;
1248
- gap:0;
1249
- padding:0;
1250
- margin:0;
1399
+ @supports (x: attr(x type(*))){
1251
1400
 
1252
- font-size:var(--tds-checkbox-group-font-size);
1253
- line-height:var(--tds-checkbox-group-line-height);
1254
- border:0;
1401
+ .tds-input textarea{
1402
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1255
1403
  }
1256
-
1257
- .tds-checkbox-group legend{
1258
- float:left;
1259
- padding:0;
1260
- margin:0;
1261
1404
  }
1262
1405
 
1263
- .tds-checkbox-group[aria-invalid="true"]{
1264
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1265
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1266
- }
1406
+ .tds-input.tds-textarea--resize-vertical textarea{
1407
+ resize:vertical;
1408
+ }
1267
1409
 
1268
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1269
- margin-left:.25ch;
1270
- color:var(--t-text-color-status-error);
1271
- content:"*";
1410
+ .tds-input.tds-textarea--resize-none textarea{
1411
+ resize:none;
1272
1412
  }
1273
1413
 
1274
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1275
- content:none;
1414
+ .tds-input.tds-textarea--resize-auto textarea{
1415
+ resize:vertical;
1276
1416
  }
1277
1417
 
1278
- .tds-checkbox-group-fields{
1279
- display:flex;
1280
- flex-direction:column;
1281
- gap:var(--tds-checkbox-group-gap);
1282
- align-items:flex-start;
1283
- margin-top:var(--t-spacing-1);
1418
+ @supports (field-sizing: content){
1419
+ .tds-input.tds-textarea--resize-auto textarea{
1420
+ field-sizing:content;
1421
+ resize:none;
1422
+ }
1423
+ }
1424
+
1425
+ .tds-input textarea{
1426
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1427
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1428
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1429
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1430
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1431
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1432
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1433
+ --tds-input-scrollbar-thumb-border-radius:999px;
1434
+ --tds-input-scrollbar-thumb-border-width:3px;
1435
+ --tds-input-scrollbar-track-margin-block:.125rem;
1436
+ scrollbar-color:initial;
1437
+ transition-timing-function:var(--t-ease-in-out);
1438
+ transition-duration:var(--t-duration-200);
1439
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1284
1440
  }
1285
1441
 
1286
- .tds-checkbox-group-description{
1287
- display:flex;
1288
- gap:var(--t-spacing-half);
1289
- align-items:flex-start;
1290
- margin:var(--t-spacing-fourth) 0 0;
1291
- font-size:var(--tds-checkbox-group-description-font-size);
1292
- line-height:var(--tds-checkbox-group-description-line-height);
1293
- color:var(--tds-checkbox-group-description-color);
1294
- cursor:text;
1295
- }
1442
+ @media (pointer: fine){
1443
+ :is(.tds-input textarea)::-webkit-scrollbar{
1444
+ width:12px;
1445
+ height:12px;
1446
+ cursor:default;
1447
+ }
1448
+
1449
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1450
+ cursor:default;
1451
+ background:var(--tds-input-scrollbar-thumb-color);
1452
+ background-clip:content-box;
1453
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1454
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1455
+ }
1456
+
1457
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1458
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1459
+ }
1296
1460
 
1297
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1298
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1299
- flex-shrink:0;
1300
- margin-top:calc(.5lh - .5em);
1301
- line-height:var(--tds-checkbox-group-description-line-height);
1302
- }
1461
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1462
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1463
+ }
1303
1464
 
1304
- .tds-checkbox-group--sm{
1305
- --tds-checkbox-group-line-height:1.35;
1306
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1307
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1308
- --tds-checkbox-group-description-line-height:1.3;
1309
- }
1465
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1466
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1467
+ }
1310
1468
 
1311
- .tds-button-group{
1312
- display:inline-flex;
1313
- }
1314
- .tds-button-group > .tds-btn{
1315
- --tds-button-group-item-z-index:1;
1469
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1470
+ background:var(--tds-input-scrollbar-surface-color);
1471
+ }
1316
1472
 
1317
- position:relative;
1318
- z-index:var(--tds-button-group-item-z-index);
1319
- border-radius:0;
1320
- }
1321
- :is(.tds-button-group > .tds-btn):not(:first-child){
1322
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1473
+ :is(.tds-input textarea)::-webkit-resizer{
1474
+ background:var(--tds-input-resizer-icon) no-repeat;
1475
+ background-position:right bottom;
1476
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1323
1477
  }
1324
- :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{
1325
- position:absolute;
1326
- inset-block:calc(var(--tds-btn-border-width) * -1);
1327
- width:var(--tds-btn-border-width);
1328
- pointer-events:none;
1329
- content:"";
1330
- background-color:var(--t-border-color-white);
1331
- }
1332
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1333
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1478
+
1479
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1480
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1481
+ cursor:default;
1482
+ }
1483
+
1484
+ @supports (-moz-appearance: none){
1485
+ :is(.tds-input textarea){
1486
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1487
+ scrollbar-width:thin;
1334
1488
  }
1335
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1336
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1489
+
1490
+ @media (hover){
1491
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1492
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1493
+ }
1337
1494
  }
1338
- :is(.tds-button-group > .tds-btn):hover{
1339
- --tds-button-group-item-z-index:2;
1340
- }
1341
- :is(.tds-button-group > .tds-btn):focus-visible{
1342
- --tds-button-group-item-z-index:5;
1343
1495
  }
1344
- .tds-button-group > .tds-btn:first-child{
1345
- border-start-start-radius:var(--tds-btn-border-radius);
1346
- border-end-start-radius:var(--tds-btn-border-radius);
1347
- }
1348
- .tds-button-group > .tds-btn:last-child{
1349
- border-start-end-radius:var(--tds-btn-border-radius);
1350
- border-end-end-radius:var(--tds-btn-border-radius);
1351
1496
  }
1352
1497
 
1353
- .tds-modal-overlay{
1354
- --tds-modal-min-margin-block:var(--t-spacing-3);
1355
-
1356
- position:fixed;
1357
- inset:0;
1358
- z-index:1000;
1359
- display:grid;
1360
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1361
- justify-items:center;
1362
- overflow-y:auto;
1363
- background:hsl(0 0% 0% / 40%);
1364
- }
1498
+ .tds-toggle-switch{
1499
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1500
+ --tds-toggle-switch-cursor:pointer;
1501
+ --tds-toggle-switch-display:inline-grid;
1502
+ --tds-toggle-switch-line-height:1.4;
1365
1503
 
1366
- .tds-modal-overlay[data-entering]{
1367
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1368
- }
1504
+ --tds-toggle-switch-label-color:var(--t-form-color);
1369
1505
 
1370
- .tds-modal-overlay[data-exiting]{
1371
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1372
- }
1506
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1507
+ --tds-toggle-switch-track-outline:none;
1508
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1509
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1510
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1373
1511
 
1374
- @keyframes tds-modal-overlay-fade{
1375
- from{
1376
- opacity:0;
1377
- }
1378
- }
1512
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1513
+ --tds-toggle-switch-thumb-transform:translateX(0);
1514
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1379
1515
 
1380
- .tds-modal-frame{
1381
- --tds-modal-width:600px;
1382
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1383
- display:flex;
1516
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1517
+ --tds-toggle-switch-description-line-height:1.35;
1518
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1519
+ position:relative;
1384
1520
 
1385
- grid-row:2;
1386
- justify-content:center;
1387
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1521
+ display:var(--tds-toggle-switch-display);
1522
+ grid-template-columns:auto;
1523
+ grid-auto-columns:1fr;
1524
+ gap:var(--t-spacing-fourth) 0;
1525
+ -webkit-user-select:none;
1526
+ -moz-user-select:none;
1527
+ user-select:none;
1388
1528
  }
1389
1529
 
1390
- .tds-modal-frame[data-entering]{
1391
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1392
- }
1393
-
1394
- .tds-modal-frame[data-exiting]{
1395
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1530
+ .tds-toggle-switch input[type="checkbox"]{
1531
+ position:absolute;
1532
+ width:var(--tds-toggle-switch-track-width);
1533
+ height:var(--tds-toggle-switch-track-height);
1534
+ margin:0;
1535
+ -webkit-appearance:none;
1536
+ -moz-appearance:none;
1537
+ appearance:none;
1538
+ cursor:var(--tds-toggle-switch-cursor);
1539
+ outline:var(--tds-toggle-switch-track-outline);
1540
+ outline-offset:var(--t-focus-ring-offset);
1541
+ background-color:transparent;
1542
+ border:0;
1543
+ border-radius:var(--t-border-radius-round);
1396
1544
  }
1397
1545
 
1398
- .tds-modal-frame--sm{
1399
- --tds-modal-width:400px;
1400
- }
1401
-
1402
- .tds-modal-frame--lg{
1403
- --tds-modal-width:800px;
1404
- }
1546
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1547
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1548
+ }
1405
1549
 
1406
- .tds-modal-frame--xl{
1407
- --tds-modal-width:1000px;
1408
- }
1550
+ .tds-toggle-switch label{
1551
+ display:inline-flex;
1552
+ grid-area:1 / 2;
1553
+ padding-inline-start:var(--t-spacing-1);
1554
+ margin-top:-.09375em;
1555
+ font-size:var(--tds-toggle-switch-font-size);
1556
+ font-weight:var(--t-font-weight-normal);
1557
+ line-height:var(--tds-toggle-switch-line-height);
1558
+ color:var(--tds-toggle-switch-label-color);
1559
+ cursor:var(--tds-toggle-switch-cursor);
1560
+ }
1409
1561
 
1410
- @keyframes tds-modal-zoom{
1411
- from{
1412
- opacity:0;
1413
- scale:.96;
1562
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1563
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1414
1564
  }
1415
- }
1416
1565
 
1417
- @media (prefers-reduced-motion: reduce){
1418
- .tds-modal-overlay[data-entering],
1419
- .tds-modal-overlay[data-exiting],
1420
- .tds-modal-frame[data-entering],
1421
- .tds-modal-frame[data-exiting]{
1422
- animation:none;
1566
+ .tds-toggle-switch:has(input:checked){
1567
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1568
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1423
1569
  }
1424
- }
1425
1570
 
1426
- .tds-modal{
1427
- display:flex;
1428
- flex-direction:column;
1429
- width:100%;
1430
- padding-block-start:var(--t-spacing-3);
1431
- padding-inline:0;
1432
- background:var(--t-surface-color-card);
1571
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1572
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1573
+ }
1433
1574
 
1434
- border:0;
1435
- border-radius:var(--t-border-radius-lg);
1436
- box-shadow:0 4px 18px 0 #0003;
1575
+ .tds-toggle-switch:has(input:disabled){
1576
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1577
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1578
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1579
+ --tds-toggle-switch-cursor:not-allowed;
1580
+ }
1581
+
1582
+ .tds-toggle-switch-track{
1583
+ position:relative;
1584
+ flex-shrink:0;
1585
+ width:var(--tds-toggle-switch-track-width);
1586
+ height:var(--tds-toggle-switch-track-height);
1587
+ background-color:var(--tds-toggle-switch-track-background-color);
1588
+ border-radius:var(--t-border-radius-round);
1589
+ transition:var(--tds-toggle-switch-track-transition);
1437
1590
  }
1438
1591
 
1439
- .tds-modal:focus{
1440
- outline:none;
1592
+ .tds-toggle-switch-track::before{
1593
+ position:absolute;
1594
+ top:var(--t-spacing-fourth);
1595
+ left:var(--t-spacing-fourth);
1596
+ width:var(--tds-toggle-switch-thumb-size);
1597
+ height:var(--tds-toggle-switch-thumb-size);
1598
+ content:"";
1599
+ background-color:#fff;
1600
+ border-radius:var(--t-border-radius-round);
1601
+ transform:var(--tds-toggle-switch-thumb-transform);
1602
+ transition:var(--tds-toggle-switch-thumb-transition);
1441
1603
  }
1442
1604
 
1443
- .tds-modal-header{
1444
- display:grid;
1445
- grid-template-columns:1fr auto;
1446
- -moz-column-gap:var(--t-spacing-2);
1447
- column-gap:var(--t-spacing-2);
1448
- padding-block:0;
1449
- padding-inline:var(--t-spacing-4);
1605
+ @media (prefers-reduced-motion: reduce){
1606
+
1607
+ .tds-toggle-switch-track{
1608
+ --tds-toggle-switch-track-transition:none;
1609
+ --tds-toggle-switch-thumb-transition:none;
1450
1610
  }
1611
+ }
1451
1612
 
1452
- .tds-modal-title{
1453
- grid-row:1;
1454
- grid-column:1;
1613
+ .tds-toggle-switch-description{
1614
+ display:flex;
1615
+ grid-area:2 / 2;
1616
+ align-items:flex-start;
1617
+ padding-inline-start:var(--t-spacing-1);
1455
1618
  margin:0;
1456
- font-size:var(--t-font-size-2xl);
1457
- font-weight:var(--t-font-weight-medium);
1458
- line-height:140%;
1459
- color:var(--t-text-color-headline);
1619
+ font-size:var(--tds-toggle-switch-description-font-size);
1620
+ line-height:var(--tds-toggle-switch-description-line-height);
1621
+ color:var(--tds-toggle-switch-description-color);
1622
+ cursor:text;
1460
1623
  }
1461
1624
 
1462
- .tds-modal-subtitle{
1463
- grid-row:2;
1464
- grid-column:1;
1465
- margin:0;
1466
- font-size:var(--t-font-size-md);
1467
- font-weight:var(--t-font-weight-medium);
1468
- line-height:140%;
1469
- color:var(--t-text-color-secondary);
1625
+ .tds-toggle-switch--sm{
1626
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1627
+ --tds-toggle-switch-line-height:1.35;
1628
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1629
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1630
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1631
+ --tds-toggle-switch-description-line-height:1.3;
1470
1632
  }
1471
1633
 
1472
- .tds-modal-close{
1473
- grid-row:1;
1474
- grid-column:2;
1475
- align-self:center;
1476
- color:var(--t-icon-color-dim);
1634
+ .tds-toggle-switch--hide-label{
1635
+ --tds-toggle-switch-display:inline-flex;
1477
1636
  }
1478
1637
 
1479
- .tds-modal-body{
1480
- padding-block:var(--t-spacing-3);
1481
- padding-inline:var(--t-spacing-4);
1482
- }
1483
1638
 
1484
- .tds-modal-body--full-width{
1485
- padding-inline:0;
1486
- }
1639
+ @media (prefers-reduced-motion: no-preference){
1487
1640
 
1488
- .tds-modal-footer{
1489
- display:flex;
1490
- gap:var(--t-spacing-2);
1491
- align-items:center;
1492
- justify-content:flex-end;
1493
- padding-block:var(--t-spacing-3);
1494
- padding-inline:var(--t-spacing-4);
1495
- border-top:1px solid var(--t-border-color);
1641
+ :root{
1642
+ interpolate-size:allow-keywords;
1496
1643
  }
1644
+ }
1497
1645
 
1498
- .tds-modal-footer > [slot="start"]{
1499
- margin-inline-end:auto;
1500
- }
1646
+ @layer tds-component{
1647
+ tds-sidenav,
1648
+ .tds-sidenav{
1649
+ --tds-sidenav-indent:12px;
1650
+ --tds-sidenav-item-depth:0;
1501
1651
 
1502
- @media (min-width: 720px){
1503
- .tds-modal-overlay{
1504
- --tds-modal-min-margin-block:0;
1505
- }
1652
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1506
1653
 
1507
- .tds-modal-footer{
1508
- position:sticky;
1509
- bottom:0;
1510
- background:var(--t-surface-color-card);
1511
- border-end-start-radius:var(--t-border-radius-lg);
1512
- border-end-end-radius:var(--t-border-radius-lg);
1513
- }
1514
- }
1654
+ --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;
1655
+ --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;
1656
+ --tds-sidenav-collapse-closed-opacity:0;
1657
+ --tds-sidenav-collapse-open-opacity:1;
1658
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1659
+ --tds-sidenav-collapse-open-transform:translateY(0);
1515
1660
 
1661
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1662
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1663
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1664
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1516
1665
 
1517
- :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{
1518
- -webkit-appearance:none;
1519
- appearance:none;
1520
- }
1666
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1667
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1668
+ --tds-sidenav-item-nested-background-selected:transparent;
1521
1669
 
1522
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1523
- inline-size:1em;
1524
- block-size:2em;
1525
- }
1526
- @supports (field-sizing: content){
1527
- .tds-input--auto-width{
1528
- inline-size:-moz-fit-content;
1529
- inline-size:fit-content;
1530
- min-inline-size:min(100%, 122px);
1670
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1671
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1672
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1673
+
1674
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1675
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1531
1676
  }
1532
1677
 
1533
- .tds-input--auto-width input{
1534
- field-sizing:content;
1535
- inline-size:auto;
1678
+ @media (prefers-reduced-motion: reduce){
1679
+ tds-sidenav,
1680
+ .tds-sidenav{
1681
+ --tds-sidenav-collapse-transition-enter:none;
1682
+ --tds-sidenav-collapse-transition-exit:none;
1683
+ --tds-sidenav-collapse-closed-transform:none;
1684
+ --tds-sidenav-collapse-open-transform:none;
1536
1685
  }
1537
- }
1686
+ }
1538
1687
 
1539
- .tds-input:has(textarea){
1540
- --tds-input-padding-block:6px;
1541
- --tds-input-resizer-size:var(--t-element-size-sm);
1542
- --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");
1688
+ .tds-sidenav--theme-gray{
1689
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1690
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1691
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1692
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1693
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1694
+ }
1543
1695
  }
1544
1696
 
1545
- @supports (x: attr(x type(*))){
1546
-
1547
- .tds-input textarea{
1548
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1549
- }
1697
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1698
+ display:flex;
1550
1699
  }
1551
1700
 
1552
- .tds-input.tds-textarea--resize-vertical textarea{
1553
- resize:vertical;
1554
- }
1701
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1702
+ flex-direction:column;
1703
+ gap:var(--t-spacing-half);
1704
+ width:100%;
1705
+ }
1555
1706
 
1556
- .tds-input.tds-textarea--resize-none textarea{
1557
- resize:none;
1558
- }
1707
+ .tds-sidenav-section-list{
1708
+ width:100%;
1709
+ padding:0;
1710
+ margin:0;
1711
+ list-style:none;
1712
+ }
1559
1713
 
1560
- .tds-input.tds-textarea--resize-auto textarea{
1561
- resize:vertical;
1562
- }
1714
+ .tds-sidenav-section-header{
1715
+ display:flex;
1716
+ align-items:baseline;
1717
+ justify-content:space-between;
1718
+ padding-top:var(--t-spacing-2);
1719
+ }
1563
1720
 
1564
- @supports (field-sizing: content){
1565
- .tds-input.tds-textarea--resize-auto textarea{
1566
- field-sizing:content;
1567
- resize:none;
1568
- }
1569
- }
1721
+ .tds-sidenav-section-header h2{
1722
+ margin:0;
1723
+ font-size:var(--t-font-size-sm);
1724
+ font-weight:var(--t-font-weight-semibold);
1725
+ line-height:1.35;
1726
+ color:var(--t-text-color-secondary);
1727
+ text-transform:uppercase;
1728
+ }
1570
1729
 
1571
- .tds-input textarea{
1572
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1573
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1574
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1575
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1576
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1577
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1578
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1579
- --tds-input-scrollbar-thumb-border-radius:999px;
1580
- --tds-input-scrollbar-thumb-border-width:3px;
1581
- --tds-input-scrollbar-track-margin-block:.125rem;
1582
- scrollbar-color:initial;
1583
- transition-timing-function:var(--t-ease-in-out);
1584
- transition-duration:var(--t-duration-200);
1585
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1586
- }
1730
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1731
+ padding-top:0;
1732
+ }
1587
1733
 
1588
- @media (pointer: fine){
1589
- :is(.tds-input textarea)::-webkit-scrollbar{
1590
- width:12px;
1591
- height:12px;
1592
- cursor:default;
1593
- }
1734
+ .tds-sidenav-section-header [slot="label-actions"]{
1735
+ display:flex;
1736
+ gap:var(--t-spacing-half);
1737
+ align-items:center;
1738
+ }
1594
1739
 
1595
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1596
- cursor:default;
1597
- background:var(--tds-input-scrollbar-thumb-color);
1598
- background-clip:content-box;
1599
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1600
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1601
- }
1740
+ .tds-sidenav-section [slot="section-actions"]{
1741
+ display:flex;
1742
+ gap:12px;
1743
+ align-items:center;
1744
+ min-height:42px;
1745
+ padding:var(--t-spacing-1) 0;
1746
+ }
1602
1747
 
1603
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1604
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1605
- }
1748
+ .tds-sidenav-section-list,
1749
+ .tds-sidenav-item{
1750
+ width:100%;
1751
+ padding:0;
1752
+ margin:0;
1753
+ }
1606
1754
 
1607
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1608
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1609
- }
1755
+ .tds-sidenav-item :is(a,button){
1756
+ position:relative;
1757
+ display:flex;
1758
+ gap:12px;
1759
+ align-items:center;
1760
+ width:100%;
1761
+ padding:12px;
1762
+ overflow:hidden;
1763
+ font-size:var(--t-font-size-sm);
1764
+ line-height:18px;
1765
+ color:var(--t-text-color-headline);
1766
+ white-space:nowrap;
1767
+ text-decoration:none;
1768
+ -webkit-appearance:none;
1769
+ -moz-appearance:none;
1770
+ appearance:none;
1771
+ cursor:pointer;
1772
+ background-color:var(--tds-sidenav-item-background, transparent);
1773
+ border:0;
1774
+ border-radius:var(--t-border-radius);
1775
+ transition:var(--tds-sidenav-item-transition);
1776
+ }
1610
1777
 
1611
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1612
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1778
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1779
+ display:block;
1780
+ flex:1;
1781
+ overflow:hidden;
1782
+ text-overflow:ellipsis;
1783
+ text-align:left;
1784
+ white-space:nowrap;
1613
1785
  }
1614
1786
 
1615
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1616
- background:var(--tds-input-scrollbar-surface-color);
1787
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1788
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1789
+ color:var(--t-text-color-headline);
1790
+ text-decoration:none;
1617
1791
  }
1618
1792
 
1619
- :is(.tds-input textarea)::-webkit-resizer{
1620
- background:var(--tds-input-resizer-icon) no-repeat;
1621
- background-position:right bottom;
1622
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1793
+ :is(.tds-sidenav-item :is(a,button)):active{
1794
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1623
1795
  }
1624
1796
 
1625
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1626
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1627
- cursor:default;
1797
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1798
+ overflow:hidden;
1799
+ color:var(--tds-sidenav-item-icon-color);
1628
1800
  }
1629
1801
 
1630
- @supports (-moz-appearance: none){
1631
- :is(.tds-input textarea){
1632
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1633
- scrollbar-width:thin;
1802
+ :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{
1803
+ display:block;
1804
+ width:var(--tds-sidenav-item-icon-size);
1805
+ height:var(--tds-sidenav-item-icon-size);
1634
1806
  }
1635
1807
 
1636
- @media (hover){
1637
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1638
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1639
- }
1640
- }
1808
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1809
+ --tds-sidenav-indent:19px;
1641
1810
  }
1642
- }
1643
1811
 
1644
- .tds-radio-group{
1645
- --tds-radio-group-font-size:var(--t-font-size-md);
1646
- --tds-radio-group-line-height:1.4;
1647
- --tds-radio-group-gap:var(--t-spacing-1);
1812
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1813
+ visibility:visible;
1814
+ block-size:auto;
1815
+ opacity:1;
1816
+ }
1648
1817
 
1649
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1650
- --tds-radio-group-description-line-height:1.35;
1651
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1652
- --tds-radio-group-description-invalid-icon-display:none;
1653
- display:flex;
1654
- flex-direction:column;
1655
- gap:0;
1656
- padding:0;
1657
- margin:0;
1818
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1819
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1820
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1658
1821
 
1659
- font-size:var(--tds-radio-group-font-size);
1660
- line-height:var(--tds-radio-group-line-height);
1661
- border:0;
1662
- }
1822
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1823
+ font-weight:var(--t-font-weight-semibold);
1824
+ }
1663
1825
 
1664
- .tds-radio-group legend{
1665
- float:left;
1666
- padding:0;
1667
- margin:0;
1826
+ .tds-sidenav-item:has(.tds-sidenav-section){
1827
+ display:flex;
1828
+ flex-direction:column;
1829
+ gap:var(--t-spacing-half);
1668
1830
  }
1669
1831
 
1670
- .tds-radio-group[aria-invalid="true"]{
1671
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1672
- --tds-radio-group-description-invalid-icon-display:inline-block;
1832
+ .tds-sidenav-item .tds-sidenav-section-list{
1833
+ --tds-sidenav-item-depth:1;
1834
+ gap:0;
1673
1835
  }
1674
1836
 
1675
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1676
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1837
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1838
+ visibility:hidden;
1839
+ block-size:0;
1840
+ overflow-y:clip;
1841
+ opacity:0;
1842
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1677
1843
  }
1678
1844
 
1679
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1680
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1681
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1845
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1846
+ --tds-sidenav-item-depth:2;
1847
+ }
1848
+
1849
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1850
+ min-height:var(--t-element-size-2xl);
1851
+ padding-block:9px;
1852
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1853
+ line-height:1;
1854
+ background-color:transparent;
1855
+ }
1856
+
1857
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1858
+ position:absolute;
1859
+ top:0;
1860
+ bottom:0;
1861
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1862
+ width:2px;
1863
+ content:"";
1864
+ background-color:var(--tds-sidenav-item-nested-border-color);
1865
+ transition:var(--tds-sidenav-item-transition);
1682
1866
  }
1683
1867
 
1684
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1685
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1868
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1869
+ position:absolute;
1870
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1871
+ z-index:-1;
1872
+ height:100%;
1873
+ content:"";
1874
+ background-color:var(--tds-sidenav-item-nested-background);
1875
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1876
+ transition:var(--tds-sidenav-item-transition);
1686
1877
  }
1687
1878
 
1688
- .tds-radio-group:has(input:required) legend::after{
1689
- margin-left:.25ch;
1690
- color:var(--t-text-color-status-error);
1691
- content:"*";
1692
- }
1879
+ :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)){
1880
+ display:block;
1881
+ text-align:left;
1882
+ white-space:normal;
1883
+ }
1693
1884
 
1694
- .tds-radio-group-fields{
1695
- display:flex;
1696
- flex-direction:column;
1697
- gap:var(--tds-radio-group-gap);
1698
- align-items:flex-start;
1699
- margin-top:var(--t-spacing-1);
1700
- }
1885
+ :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{
1886
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1887
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1888
+ }
1701
1889
 
1702
- .tds-radio-group-description{
1703
- display:flex;
1704
- gap:var(--t-spacing-half);
1705
- align-items:flex-start;
1706
- margin:var(--t-spacing-fourth) 0 0;
1707
- font-size:var(--tds-radio-group-description-font-size);
1708
- line-height:var(--tds-radio-group-description-line-height);
1709
- color:var(--tds-radio-group-description-color);
1710
- cursor:text;
1711
- }
1890
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1891
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1892
+ }
1712
1893
 
1713
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1714
- display:var(--tds-radio-group-description-invalid-icon-display);
1715
- flex-shrink:0;
1716
- margin-top:calc(.5lh - .5em);
1717
- line-height:var(--tds-radio-group-description-line-height);
1718
- }
1894
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1895
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1896
+ font-weight:var(--t-font-weight-medium);
1897
+ }
1719
1898
 
1720
- .tds-radio-group--sm{
1721
- --tds-radio-group-line-height:1.35;
1722
- --tds-radio-group-font-size:var(--t-font-size-sm);
1723
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1724
- --tds-radio-group-description-line-height:1.3;
1899
+ .tds-sidenav-responsive-header{
1900
+ display:flex;
1901
+ gap:var(--t-spacing-2);
1902
+ align-items:center;
1903
+ width:100%;
1725
1904
  }
1726
1905
 
1727
- .tds-radio{
1728
- --tds-radio-font-size:var(--t-font-size-md);
1729
- --tds-radio-cursor:pointer;
1730
- --tds-radio-line-height:1.4;
1731
- --tds-radio-transition-property:border-width;
1732
-
1733
- --tds-radio-input-size:var(--t-element-size-md);
1734
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1735
- --tds-radio-input-border-color:var(--t-form-border-color);
1736
- --tds-radio-input-border-width:var(--t-form-border-width);
1737
- --tds-radio-input-background-color:var(--t-form-background-color);
1738
-
1739
- --tds-radio-label-color:var(--t-form-color);
1906
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1907
+ order:0;
1908
+ }
1740
1909
 
1741
- --tds-radio-description-font-size:var(--t-font-size-sm);
1742
- --tds-radio-description-line-height:1.35;
1743
- --tds-radio-description-color:var(--t-text-color-secondary);
1910
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1911
+ flex:1;
1912
+ order:1;
1913
+ margin:0;
1914
+ font-size:var(--t-font-size-lg);
1915
+ font-weight:var(--t-font-weight-medium);
1916
+ color:var(--t-text-color-headline);
1917
+ }
1744
1918
 
1745
- position:relative;
1746
- display:inline-grid;
1747
- grid-template-columns:auto;
1748
- grid-auto-columns:1fr;
1749
- gap:var(--t-spacing-fourth) 0;
1750
- line-height:var(--tds-radio-line-height);
1751
- -webkit-user-select:none;
1752
- -moz-user-select:none;
1753
- user-select:none;
1754
- }
1919
+ @media (max-width: 719px){
1920
+ .tds-sidenav-collapse{
1921
+ z-index:10001;
1922
+ display:none;
1923
+ max-width:min(448px, calc(100vw - 48px));
1924
+ padding:0;
1925
+ margin:12px 0;
1926
+ position-area:bottom span-right;
1927
+ overflow:hidden;
1928
+ outline:0;
1929
+ background:var(--t-surface-color-card);
1930
+ border:0;
1931
+ border-radius:6px;
1932
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1933
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1934
+ transform:var(--tds-sidenav-collapse-open-transform);
1935
+ transition:var(--tds-sidenav-collapse-transition-enter);
1936
+ will-change:transform;
1937
+ }
1755
1938
 
1756
- .tds-radio label{
1757
- grid-area:1 / 2;
1758
- padding-inline-start:var(--t-spacing-1);
1759
- font-size:var(--tds-radio-font-size);
1760
- font-weight:var(--t-font-weight-normal);
1761
- color:var(--tds-radio-label-color);
1762
- cursor:var(--tds-radio-cursor);
1939
+ .tds-sidenav-scroll-container{
1940
+ --webkit-overflow-scrolling:touch;
1941
+ display:block;
1942
+ width:100%;
1943
+ height:-moz-fit-content;
1944
+ height:fit-content;
1945
+ padding:var(--t-spacing-2);
1946
+ overflow-y:auto;
1763
1947
  }
1764
1948
 
1765
- .tds-radio input[type="radio"]{
1766
- position:relative;
1767
- width:1em;
1768
- height:1em;
1769
- margin:calc((1lh - 1em) / 2) 0 0;
1770
- font-size:var(--tds-radio-font-size);
1771
- line-height:inherit;
1772
- -webkit-appearance:none;
1773
- -moz-appearance:none;
1774
- appearance:none;
1775
- cursor:var(--tds-radio-cursor);
1776
- background-color:var(--tds-radio-input-background-color);
1777
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1778
- border-radius:var(--tds-radio-input-border-radius);
1779
- transition-timing-function:var(--t-ease-in-out);
1780
- transition-duration:var(--t-duration-200);
1781
- transition-property:var(--tds-radio-transition-property);
1949
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1950
+ display:none;
1782
1951
  }
1783
-
1784
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1785
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1786
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1952
+ @supports selector(:popover-open){
1953
+ .tds-sidenav-collapse:popover-open{
1954
+ display:flex;
1787
1955
  }
1788
1956
 
1789
- :is(.tds-radio input[type="radio"]):focus-visible{
1790
- outline:var(--t-focus-ring-outline);
1791
- outline-offset:var(--t-focus-ring-offset);
1957
+ .tds-sidenav-collapse:not(:popover-open){
1958
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1959
+ transition:var(--tds-sidenav-collapse-transition-exit);
1792
1960
  }
1793
1961
 
1794
- :is(.tds-radio input[type="radio"]):disabled{
1795
- pointer-events:none;
1962
+ @starting-style{
1963
+ .tds-sidenav-collapse:popover-open{
1964
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1965
+ transform:var(--tds-sidenav-collapse-closed-transform);
1966
+ }
1796
1967
  }
1797
-
1798
- @media (prefers-reduced-motion: reduce){
1799
-
1800
- .tds-radio input[type="radio"]{
1801
- --tds-radio-transition-property:none;
1802
1968
  }
1969
+ @supports not selector(:popover-open){
1970
+ .tds-sidenav-collapse.\:popover-open{
1971
+ display:flex;
1803
1972
  }
1804
1973
 
1805
- .tds-radio:has(input:checked){
1806
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1807
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1808
- --tds-radio-input-border-width:4px;
1809
- }
1810
-
1811
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1812
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1813
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1974
+ .tds-sidenav-collapse:not(.\:popover-open){
1975
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1976
+ transition:var(--tds-sidenav-collapse-transition-exit);
1814
1977
  }
1815
-
1816
- .tds-radio:has(input:user-invalid){
1817
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1818
1978
  }
1979
+ }
1819
1980
 
1820
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1821
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1822
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1823
- }
1824
-
1825
- .tds-radio:has(input:disabled){
1826
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1827
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1828
-
1829
- --tds-radio-label-color:var(--t-form-color-disabled);
1830
- --tds-radio-description-color:var(--t-form-color-disabled);
1831
- --tds-radio-cursor:not-allowed;
1981
+ @media (min-width: 720px){
1982
+ .tds-sidenav-responsive-header{
1983
+ display:none;
1832
1984
  }
1985
+ }
1833
1986
 
1834
- .tds-radio:has(input:disabled) input:checked{
1835
- --tds-radio-input-background-color:var(--t-form-background-color);
1836
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1987
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1988
+ display:none;
1837
1989
  }
1838
1990
 
1839
- .tds-radio-description{
1840
- display:flex;
1841
- grid-area:2 / 2;
1842
- gap:var(--t-spacing-half);
1843
- align-items:flex-start;
1844
- padding-inline-start:var(--t-spacing-1);
1845
- margin:0;
1846
- font-size:var(--tds-radio-description-font-size);
1847
- line-height:var(--tds-radio-description-line-height);
1848
- color:var(--tds-radio-description-color);
1849
- cursor:text;
1850
- }
1991
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1992
+ display:block;
1993
+ }
1851
1994
 
1852
- .tds-radio--sm{
1853
- --tds-radio-line-height:1.35;
1854
- --tds-radio-input-size:var(--t-element-size-sm);
1855
- --tds-radio-font-size:var(--t-font-size-sm);
1856
- --tds-radio-description-font-size:var(--t-font-size-xs);
1857
- --tds-radio-description-line-height:1.3;
1858
- }
1995
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1996
+ display:flex;
1997
+ flex-direction:column;
1998
+ }
1859
1999
 
1860
2000
  @layer t-critical{
1861
2001
  tds-page-header:not(.hydrated){
@@ -2125,153 +2265,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2125
2265
  @keyframes indicator-pulse{
2126
2266
  0%{
2127
2267
  opacity:.3;
2128
- transform:scale(.9);
2129
- }
2130
-
2131
- 100%{
2132
- opacity:0;
2133
- transform:scale(1.75);
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
- }
2268
+ transform:scale(.9);
2269
+ }
2272
2270
 
2273
- .tds-toggle-switch--hide-label{
2274
- --tds-toggle-switch-display:inline-flex;
2271
+ 100%{
2272
+ opacity:0;
2273
+ transform:scale(1.75);
2274
+ }
2275
2275
  }
2276
2276
 
2277
2277
  .tds-input{
@@ -3994,130 +3994,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3994
3994
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
3995
3995
  }
3996
3996
 
3997
- .tds-segmented-control{
3998
- --tds-segmented-control-font-size:var(--t-font-size-md);
3999
- --tds-segmented-control-padding:var(--t-spacing-half);
4000
- --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4001
- --tds-segmented-control-icon-size:.66666667lh;
4002
- --tds-segmented-control-border-radius:var(--t-border-radius-md);
4003
- --tds-segmented-control-max-width:280px;
4004
- --tds-segmented-control-min-height:var(--t-container-size-md);
4005
- --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4006
- --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4007
- --tds-segmented-control-width:fit-content;
4008
-
4009
- display:flex;
4010
- flex-direction:column;
4011
- gap:var(--t-spacing-half);
4012
- align-items:flex-start;
4013
- width:var(--tds-segmented-control-width);
4014
- }
4015
-
4016
- .tds-segmented-control--sm{
4017
- --tds-segmented-control-font-size:var(--t-font-size-sm);
4018
- --tds-segmented-control-padding-inline:7px;
4019
- --tds-segmented-control-min-height:var(--t-container-size-sm);
4020
- }
4021
-
4022
- .tds-segmented-control--full-width{
4023
- --tds-segmented-control-width:100%;
4024
- --tds-segmented-control-max-width:none;
4025
- }
4026
-
4027
- .tds-segmented-control--full-width .tds-segmented-control-segment{
4028
- flex:1 1 0;
4029
- }
4030
-
4031
- .tds-segmented-control-label{
4032
- font-size:var(--tds-segmented-control-font-size);
4033
- font-weight:var(--t-font-weight-normal);
4034
- color:var(--t-text-color-headline);
4035
- }
4036
-
4037
- .tds-segmented-control-label--hidden{
4038
- position:absolute;
4039
- width:1px;
4040
- height:1px;
4041
- overflow:hidden;
4042
- white-space:nowrap;
4043
- clip-path:inset(50%);
4044
- }
4045
-
4046
- .tds-segmented-control-track{
4047
- display:inline-flex;
4048
- gap:var(--tds-segmented-control-track-gap);
4049
- width:var(--tds-segmented-control-width);
4050
- padding:var(--tds-segmented-control-padding);
4051
- background-color:var(--t-form-background-color);
4052
- border:1px solid var(--t-border-color);
4053
- border-radius:var(--tds-segmented-control-border-radius);
4054
- }
4055
-
4056
- .tds-segmented-control-segment{
4057
- --tds-segmented-control-color:var(--t-text-color-status-neutral);
4058
- --tds-segmented-control-background-color:transparent;
4059
-
4060
- display:inline-flex;
4061
- gap:var(--t-spacing-1);
4062
- align-items:center;
4063
- justify-content:center;
4064
- max-width:var(--tds-segmented-control-max-width);
4065
- min-height:var(--tds-segmented-control-min-height);
4066
- padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4067
- padding-inline:var(--tds-segmented-control-padding-inline);
4068
- font:inherit;
4069
- font-size:var(--tds-segmented-control-font-size);
4070
- color:var(--tds-segmented-control-color);
4071
- text-align:center;
4072
- cursor:pointer;
4073
- -webkit-user-select:none;
4074
- -moz-user-select:none;
4075
- user-select:none;
4076
- background-color:var(--tds-segmented-control-background-color);
4077
- border:0;
4078
- border-radius:var(--t-border-radius-sm);
4079
- transition-timing-function:var(--t-ease-in-out);
4080
- transition-duration:var(--t-duration-200);
4081
- transition-property:color, background-color;
4082
- }
4083
-
4084
- .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4085
- padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4086
- }
4087
-
4088
- .tds-segmented-control-segment .symbol{
4089
- display:block;
4090
- flex-shrink:0;
4091
- width:var(--tds-segmented-control-icon-size);
4092
- height:var(--tds-segmented-control-icon-size);
4093
- }
4094
-
4095
- .tds-segmented-control-segment:focus-visible{
4096
- outline:var(--t-focus-ring-outline);
4097
- outline-offset:var(--t-focus-ring-offset);
4098
- }
4099
-
4100
- .tds-segmented-control-segment[aria-checked="true"]{
4101
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4102
- --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
4103
-
4104
- cursor:default;
4105
- }
4106
-
4107
- .tds-segmented-control-segment:disabled{
4108
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4109
- --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
4110
-
4111
- pointer-events:none;
4112
- }
4113
-
4114
- .tds-segmented-control-segment--interaction-subtle{
4115
- --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4116
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4117
- --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4118
- --tds-segmented-control-background-color-disabled:transparent;
4119
- }
4120
-
4121
3997
  .tds-data-table{
4122
3998
  --tds-data-table-background-color:var(--t-surface-color-canvas);
4123
3999
  --tds-data-table-border-color:var(--t-border-color);
@@ -4520,6 +4396,130 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4520
4396
  max-block-size:inherit;
4521
4397
  }
4522
4398
 
4399
+ .tds-segmented-control{
4400
+ --tds-segmented-control-font-size:var(--t-font-size-md);
4401
+ --tds-segmented-control-padding:var(--t-spacing-half);
4402
+ --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4403
+ --tds-segmented-control-icon-size:.66666667lh;
4404
+ --tds-segmented-control-border-radius:var(--t-border-radius-md);
4405
+ --tds-segmented-control-max-width:280px;
4406
+ --tds-segmented-control-min-height:var(--t-container-size-md);
4407
+ --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4408
+ --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4409
+ --tds-segmented-control-width:fit-content;
4410
+
4411
+ display:flex;
4412
+ flex-direction:column;
4413
+ gap:var(--t-spacing-half);
4414
+ align-items:flex-start;
4415
+ width:var(--tds-segmented-control-width);
4416
+ }
4417
+
4418
+ .tds-segmented-control--sm{
4419
+ --tds-segmented-control-font-size:var(--t-font-size-sm);
4420
+ --tds-segmented-control-padding-inline:7px;
4421
+ --tds-segmented-control-min-height:var(--t-container-size-sm);
4422
+ }
4423
+
4424
+ .tds-segmented-control--full-width{
4425
+ --tds-segmented-control-width:100%;
4426
+ --tds-segmented-control-max-width:none;
4427
+ }
4428
+
4429
+ .tds-segmented-control--full-width .tds-segmented-control-segment{
4430
+ flex:1 1 0;
4431
+ }
4432
+
4433
+ .tds-segmented-control-label{
4434
+ font-size:var(--tds-segmented-control-font-size);
4435
+ font-weight:var(--t-font-weight-normal);
4436
+ color:var(--t-text-color-headline);
4437
+ }
4438
+
4439
+ .tds-segmented-control-label--hidden{
4440
+ position:absolute;
4441
+ width:1px;
4442
+ height:1px;
4443
+ overflow:hidden;
4444
+ white-space:nowrap;
4445
+ clip-path:inset(50%);
4446
+ }
4447
+
4448
+ .tds-segmented-control-track{
4449
+ display:inline-flex;
4450
+ gap:var(--tds-segmented-control-track-gap);
4451
+ width:var(--tds-segmented-control-width);
4452
+ padding:var(--tds-segmented-control-padding);
4453
+ background-color:var(--t-form-background-color);
4454
+ border:1px solid var(--t-border-color);
4455
+ border-radius:var(--tds-segmented-control-border-radius);
4456
+ }
4457
+
4458
+ .tds-segmented-control-segment{
4459
+ --tds-segmented-control-color:var(--t-text-color-status-neutral);
4460
+ --tds-segmented-control-background-color:transparent;
4461
+
4462
+ display:inline-flex;
4463
+ gap:var(--t-spacing-1);
4464
+ align-items:center;
4465
+ justify-content:center;
4466
+ max-width:var(--tds-segmented-control-max-width);
4467
+ min-height:var(--tds-segmented-control-min-height);
4468
+ padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4469
+ padding-inline:var(--tds-segmented-control-padding-inline);
4470
+ font:inherit;
4471
+ font-size:var(--tds-segmented-control-font-size);
4472
+ color:var(--tds-segmented-control-color);
4473
+ text-align:center;
4474
+ cursor:pointer;
4475
+ -webkit-user-select:none;
4476
+ -moz-user-select:none;
4477
+ user-select:none;
4478
+ background-color:var(--tds-segmented-control-background-color);
4479
+ border:0;
4480
+ border-radius:var(--t-border-radius-sm);
4481
+ transition-timing-function:var(--t-ease-in-out);
4482
+ transition-duration:var(--t-duration-200);
4483
+ transition-property:color, background-color;
4484
+ }
4485
+
4486
+ .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4487
+ padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4488
+ }
4489
+
4490
+ .tds-segmented-control-segment .symbol{
4491
+ display:block;
4492
+ flex-shrink:0;
4493
+ width:var(--tds-segmented-control-icon-size);
4494
+ height:var(--tds-segmented-control-icon-size);
4495
+ }
4496
+
4497
+ .tds-segmented-control-segment:focus-visible{
4498
+ outline:var(--t-focus-ring-outline);
4499
+ outline-offset:var(--t-focus-ring-offset);
4500
+ }
4501
+
4502
+ .tds-segmented-control-segment[aria-checked="true"]{
4503
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4504
+ --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
4505
+
4506
+ cursor:default;
4507
+ }
4508
+
4509
+ .tds-segmented-control-segment:disabled{
4510
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4511
+ --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
4512
+
4513
+ pointer-events:none;
4514
+ }
4515
+
4516
+ .tds-segmented-control-segment--interaction-subtle{
4517
+ --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4518
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4519
+ --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4520
+ --tds-segmented-control-background-color-disabled:transparent;
4521
+ }
4522
+
4523
4523
  .tds-popover{
4524
4524
  max-inline-size:24rem;
4525
4525
  overflow:auto;