@planningcenter/tapestry 4.5.0-rc.1 → 4.5.0-rc.2

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 +1253 -1253
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1253 -1253
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -719,201 +719,6 @@
719
719
  border-end-end-radius:var(--tds-btn-border-radius);
720
720
  }
721
721
 
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;
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);
763
- }
764
-
765
- .tds-checkbox tds-indeterminate{
766
- display:flex;
767
- }
768
-
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
- }
787
-
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
- }
807
-
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
- }
812
-
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
- }
817
-
818
- :is(.tds-checkbox input[type="checkbox"]):disabled{
819
- pointer-events:none;
820
- }
821
-
822
- @media (prefers-reduced-motion: reduce){
823
-
824
- .tds-checkbox input[type="checkbox"]{
825
- --tds-checkbox-transition-property:none;
826
- }
827
- }
828
-
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;
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);
839
- }
840
-
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");
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;
900
- }
901
-
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
722
  .tds-checkbox-group{
918
723
  --tds-checkbox-group-font-size:var(--t-font-size-md);
919
724
  --tds-checkbox-group-line-height:1.4;
@@ -988,58 +793,221 @@
988
793
  --tds-checkbox-group-description-line-height:1.3;
989
794
  }
990
795
 
991
- @layer t-critical{
992
- tds-page-header:not(.hydrated){
993
- display:none;
994
- }
995
- }
996
-
997
- @layer t-component{
998
- .tds-page-header{
999
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1000
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1001
- --tds-page-header-color:var(--t-text-color);
1002
- --tds-page-header-bottom-border-color:transparent;
1003
- --tds-page-header-headline-color:var(--t-text-color-headline);
1004
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1005
- --tds-page-header-padding-x:var(--t-spacing-2);
1006
- --tds-page-header-padding-y:var(--t-spacing-2);
1007
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1008
- --tds-page-header-nav-gap:var(--t-spacing-1);
1009
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
1010
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1011
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1012
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1013
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1014
- --tds-page-header-nav-item-border-width:1px;
1015
-
1016
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1017
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1018
-
1019
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1020
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1021
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1022
-
1023
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1024
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
796
+ .tds-modal-overlay{
797
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1025
798
 
1026
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1027
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1028
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
799
+ position:fixed;
800
+ inset:0;
801
+ z-index:1000;
802
+ display:grid;
803
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
804
+ justify-items:center;
805
+ overflow-y:auto;
806
+ background:hsl(0 0% 0% / 40%);
807
+ }
1029
808
 
1030
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1031
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1032
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1033
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1034
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
809
+ .tds-modal-overlay[data-entering]{
810
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1035
811
  }
1036
812
 
1037
- .tds-page-header--profile{
1038
- --tds-page-header-padding-y:20px;
813
+ .tds-modal-overlay[data-exiting]{
814
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1039
815
  }
1040
816
 
1041
- @supports (color: light-dark(#fff, #000)){
1042
- .tds-page-header{
817
+ @keyframes tds-modal-overlay-fade{
818
+ from{
819
+ opacity:0;
820
+ }
821
+ }
822
+
823
+ .tds-modal-frame{
824
+ --tds-modal-width:600px;
825
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
826
+ display:flex;
827
+
828
+ grid-row:2;
829
+ justify-content:center;
830
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
831
+ }
832
+
833
+ .tds-modal-frame[data-entering]{
834
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
835
+ }
836
+
837
+ .tds-modal-frame[data-exiting]{
838
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
839
+ }
840
+
841
+ .tds-modal-frame--sm{
842
+ --tds-modal-width:400px;
843
+ }
844
+
845
+ .tds-modal-frame--lg{
846
+ --tds-modal-width:800px;
847
+ }
848
+
849
+ .tds-modal-frame--xl{
850
+ --tds-modal-width:1000px;
851
+ }
852
+
853
+ @keyframes tds-modal-zoom{
854
+ from{
855
+ opacity:0;
856
+ scale:.96;
857
+ }
858
+ }
859
+
860
+ @media (prefers-reduced-motion: reduce){
861
+ .tds-modal-overlay[data-entering],
862
+ .tds-modal-overlay[data-exiting],
863
+ .tds-modal-frame[data-entering],
864
+ .tds-modal-frame[data-exiting]{
865
+ animation:none;
866
+ }
867
+ }
868
+
869
+ .tds-modal{
870
+ display:flex;
871
+ flex-direction:column;
872
+ width:100%;
873
+ padding-block-start:var(--t-spacing-3);
874
+ padding-inline:0;
875
+ background:var(--t-surface-color-card);
876
+
877
+ border:0;
878
+ border-radius:var(--t-border-radius-lg);
879
+ box-shadow:0 4px 18px 0 #0003;
880
+ }
881
+
882
+ .tds-modal:focus{
883
+ outline:none;
884
+ }
885
+
886
+ .tds-modal-header{
887
+ display:grid;
888
+ grid-template-columns:1fr auto;
889
+ -moz-column-gap:var(--t-spacing-2);
890
+ column-gap:var(--t-spacing-2);
891
+ padding-block:0;
892
+ padding-inline:var(--t-spacing-4);
893
+ }
894
+
895
+ .tds-modal-title{
896
+ grid-row:1;
897
+ grid-column:1;
898
+ margin:0;
899
+ font-size:var(--t-font-size-2xl);
900
+ font-weight:var(--t-font-weight-medium);
901
+ line-height:140%;
902
+ color:var(--t-text-color-headline);
903
+ }
904
+
905
+ .tds-modal-subtitle{
906
+ grid-row:2;
907
+ grid-column:1;
908
+ margin:0;
909
+ font-size:var(--t-font-size-md);
910
+ font-weight:var(--t-font-weight-medium);
911
+ line-height:140%;
912
+ color:var(--t-text-color-secondary);
913
+ }
914
+
915
+ .tds-modal-close{
916
+ grid-row:1;
917
+ grid-column:2;
918
+ align-self:center;
919
+ color:var(--t-icon-color-dim);
920
+ }
921
+
922
+ .tds-modal-body{
923
+ padding-block:var(--t-spacing-3);
924
+ padding-inline:var(--t-spacing-4);
925
+ }
926
+
927
+ .tds-modal-body--full-width{
928
+ padding-inline:0;
929
+ }
930
+
931
+ .tds-modal-footer{
932
+ display:flex;
933
+ gap:var(--t-spacing-2);
934
+ align-items:center;
935
+ justify-content:flex-end;
936
+ padding-block:var(--t-spacing-3);
937
+ padding-inline:var(--t-spacing-4);
938
+ border-top:1px solid var(--t-border-color);
939
+ }
940
+
941
+ .tds-modal-footer > [slot="start"]{
942
+ margin-inline-end:auto;
943
+ }
944
+
945
+ @media (min-width: 720px){
946
+ .tds-modal-overlay{
947
+ --tds-modal-min-margin-block:0;
948
+ }
949
+
950
+ .tds-modal-footer{
951
+ position:sticky;
952
+ bottom:0;
953
+ background:var(--t-surface-color-card);
954
+ border-end-start-radius:var(--t-border-radius-lg);
955
+ border-end-end-radius:var(--t-border-radius-lg);
956
+ }
957
+ }
958
+
959
+ @layer t-critical{
960
+ tds-page-header:not(.hydrated){
961
+ display:none;
962
+ }
963
+ }
964
+
965
+ @layer t-component{
966
+ .tds-page-header{
967
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
968
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
969
+ --tds-page-header-color:var(--t-text-color);
970
+ --tds-page-header-bottom-border-color:transparent;
971
+ --tds-page-header-headline-color:var(--t-text-color-headline);
972
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
973
+ --tds-page-header-padding-x:var(--t-spacing-2);
974
+ --tds-page-header-padding-y:var(--t-spacing-2);
975
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
976
+ --tds-page-header-nav-gap:var(--t-spacing-1);
977
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
978
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
979
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
980
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
981
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
982
+ --tds-page-header-nav-item-border-width:1px;
983
+
984
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
985
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
986
+
987
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
988
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
989
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
990
+
991
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
992
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
993
+
994
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
995
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
996
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
997
+
998
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
999
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1000
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1001
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1002
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1003
+ }
1004
+
1005
+ .tds-page-header--profile{
1006
+ --tds-page-header-padding-y:20px;
1007
+ }
1008
+
1009
+ @supports (color: light-dark(#fff, #000)){
1010
+ .tds-page-header{
1043
1011
  --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1044
1012
  --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1045
1013
  }
@@ -1265,1014 +1233,963 @@
1265
1233
  }
1266
1234
  }
1267
1235
 
1236
+ .tds-checkbox{
1237
+ --tds-checkbox-font-size:var(--t-font-size-md);
1238
+ --tds-checkbox-cursor:pointer;
1239
+ --tds-checkbox-line-height:1.4;
1240
+ --tds-checkbox-transition-property:background-color, border-color;
1268
1241
 
1269
- :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{
1270
- -webkit-appearance:none;
1271
- appearance:none;
1272
- }
1273
-
1274
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1275
- inline-size:1em;
1276
- block-size:2em;
1277
- }
1278
- @supports (field-sizing: content){
1279
- .tds-input--auto-width{
1280
- inline-size:-moz-fit-content;
1281
- inline-size:fit-content;
1282
- min-inline-size:min(100%, 122px);
1283
- }
1284
-
1285
- .tds-input--auto-width input{
1286
- field-sizing:content;
1287
- inline-size:auto;
1288
- }
1289
- }
1290
-
1291
- .tds-radio{
1292
- --tds-radio-font-size:var(--t-font-size-md);
1293
- --tds-radio-cursor:pointer;
1294
- --tds-radio-line-height:1.4;
1295
- --tds-radio-transition-property:border-width;
1242
+ --tds-checkbox-input-size:var(--t-element-size-md);
1243
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1244
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1245
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1296
1246
 
1297
- --tds-radio-input-size:var(--t-element-size-md);
1298
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1299
- --tds-radio-input-border-color:var(--t-form-border-color);
1300
- --tds-radio-input-border-width:var(--t-form-border-width);
1301
- --tds-radio-input-background-color:var(--t-form-background-color);
1247
+ --tds-checkbox-input-icon:none;
1248
+ --tds-checkbox-input-icon-visibility:hidden;
1249
+ --tds-checkbox-input-icon-opacity:0;
1250
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1302
1251
 
1303
- --tds-radio-label-color:var(--t-form-color);
1252
+ --tds-checkbox-label-color:var(--t-form-color);
1304
1253
 
1305
- --tds-radio-description-font-size:var(--t-font-size-sm);
1306
- --tds-radio-description-line-height:1.35;
1307
- --tds-radio-description-color:var(--t-text-color-secondary);
1254
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1255
+ --tds-checkbox-description-line-height:1.35;
1256
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1257
+ --tds-checkbox-description-invalid-icon-display:none;
1308
1258
 
1309
1259
  position:relative;
1310
1260
  display:inline-grid;
1311
1261
  grid-template-columns:auto;
1312
1262
  grid-auto-columns:1fr;
1313
1263
  gap:var(--t-spacing-fourth) 0;
1314
- line-height:var(--tds-radio-line-height);
1264
+ line-height:var(--tds-checkbox-line-height);
1315
1265
  -webkit-user-select:none;
1316
1266
  -moz-user-select:none;
1317
1267
  user-select:none;
1318
1268
  }
1319
1269
 
1320
- .tds-radio label{
1270
+ .tds-checkbox label{
1321
1271
  grid-area:1 / 2;
1322
1272
  padding-inline-start:var(--t-spacing-1);
1323
- font-size:var(--tds-radio-font-size);
1273
+ font-size:var(--tds-checkbox-font-size);
1324
1274
  font-weight:var(--t-font-weight-normal);
1325
- color:var(--tds-radio-label-color);
1326
- cursor:var(--tds-radio-cursor);
1275
+ color:var(--tds-checkbox-label-color);
1276
+ cursor:var(--tds-checkbox-cursor);
1327
1277
  }
1328
1278
 
1329
- .tds-radio input[type="radio"]{
1279
+ .tds-checkbox tds-indeterminate{
1280
+ display:flex;
1281
+ }
1282
+
1283
+ .tds-checkbox input[type="checkbox"]{
1330
1284
  position:relative;
1331
1285
  width:1em;
1332
1286
  height:1em;
1333
1287
  margin:calc((1lh - 1em) / 2) 0 0;
1334
- font-size:var(--tds-radio-font-size);
1288
+ font-size:var(--tds-checkbox-font-size);
1335
1289
  line-height:inherit;
1336
1290
  -webkit-appearance:none;
1337
1291
  -moz-appearance:none;
1338
1292
  appearance:none;
1339
- cursor:var(--tds-radio-cursor);
1340
- background-color:var(--tds-radio-input-background-color);
1341
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1342
- border-radius:var(--tds-radio-input-border-radius);
1293
+ cursor:var(--tds-checkbox-cursor);
1294
+ background-color:var(--tds-checkbox-input-background-color);
1295
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1296
+ border-radius:var(--tds-checkbox-input-border-radius);
1343
1297
  transition-timing-function:var(--t-ease-in-out);
1344
1298
  transition-duration:var(--t-duration-200);
1345
- transition-property:var(--tds-radio-transition-property);
1299
+ transition-property:var(--tds-checkbox-transition-property);
1346
1300
  }
1347
1301
 
1348
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1349
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1350
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1302
+ :is(.tds-checkbox input[type="checkbox"])::before{
1303
+ position:absolute;
1304
+ top:50%;
1305
+ left:50%;
1306
+ visibility:var(--tds-checkbox-input-icon-visibility);
1307
+ width:100%;
1308
+ height:100%;
1309
+ content:"";
1310
+ background-color:var(--tds-checkbox-input-icon-fill);
1311
+ border-radius:var(--tds-checkbox-input-border-radius);
1312
+ opacity:var(--tds-checkbox-input-icon-opacity);
1313
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1314
+ mask-image:var(--tds-checkbox-input-icon);
1315
+ -webkit-mask-repeat:no-repeat;
1316
+ mask-repeat:no-repeat;
1317
+ -webkit-mask-size:contain;
1318
+ mask-size:contain;
1319
+ transform:translate(-50%, -50%);
1351
1320
  }
1352
1321
 
1353
- :is(.tds-radio input[type="radio"]):focus-visible{
1322
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1323
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1324
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1325
+ }
1326
+
1327
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1354
1328
  outline:var(--t-focus-ring-outline);
1355
1329
  outline-offset:var(--t-focus-ring-offset);
1356
1330
  }
1357
1331
 
1358
- :is(.tds-radio input[type="radio"]):disabled{
1332
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1359
1333
  pointer-events:none;
1360
1334
  }
1361
1335
 
1362
1336
  @media (prefers-reduced-motion: reduce){
1363
1337
 
1364
- .tds-radio input[type="radio"]{
1365
- --tds-radio-transition-property:none;
1366
- }
1367
- }
1368
-
1369
- .tds-radio:has(input:checked){
1370
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1371
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1372
- --tds-radio-input-border-width:4px;
1338
+ .tds-checkbox input[type="checkbox"]{
1339
+ --tds-checkbox-transition-property:none;
1373
1340
  }
1374
-
1375
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1376
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1377
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1378
1341
  }
1379
1342
 
1380
- .tds-radio:has(input:user-invalid){
1381
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1343
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1344
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1345
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1346
+ --tds-checkbox-input-icon-visibility:visible;
1347
+ --tds-checkbox-input-icon-opacity:1;
1382
1348
  }
1383
1349
 
1384
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1385
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1386
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1350
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1351
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1352
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1387
1353
  }
1388
1354
 
1389
- .tds-radio:has(input:disabled){
1390
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1391
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1392
-
1393
- --tds-radio-label-color:var(--t-form-color-disabled);
1394
- --tds-radio-description-color:var(--t-form-color-disabled);
1395
- --tds-radio-cursor:not-allowed;
1355
+ .tds-checkbox:has(input:checked){
1356
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1396
1357
  }
1397
1358
 
1398
- .tds-radio:has(input:disabled) input:checked{
1399
- --tds-radio-input-background-color:var(--t-form-background-color);
1400
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1401
- }
1402
-
1403
- .tds-radio-description{
1404
- display:flex;
1405
- grid-area:2 / 2;
1406
- gap:var(--t-spacing-half);
1407
- align-items:flex-start;
1408
- padding-inline-start:var(--t-spacing-1);
1409
- margin:0;
1410
- font-size:var(--tds-radio-description-font-size);
1411
- line-height:var(--tds-radio-description-line-height);
1412
- color:var(--tds-radio-description-color);
1413
- cursor:text;
1414
- }
1415
-
1416
- .tds-radio--sm{
1417
- --tds-radio-line-height:1.35;
1418
- --tds-radio-input-size:var(--t-element-size-sm);
1419
- --tds-radio-font-size:var(--t-font-size-sm);
1420
- --tds-radio-description-font-size:var(--t-font-size-xs);
1421
- --tds-radio-description-line-height:1.3;
1422
- }
1423
-
1424
- .tds-radio-group{
1425
- --tds-radio-group-font-size:var(--t-font-size-md);
1426
- --tds-radio-group-line-height:1.4;
1427
- --tds-radio-group-gap:var(--t-spacing-1);
1428
-
1429
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1430
- --tds-radio-group-description-line-height:1.35;
1431
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1432
- --tds-radio-group-description-invalid-icon-display:none;
1433
- display:flex;
1434
- flex-direction:column;
1435
- gap:0;
1436
- padding:0;
1437
- margin:0;
1438
-
1439
- font-size:var(--tds-radio-group-font-size);
1440
- line-height:var(--tds-radio-group-line-height);
1441
- border:0;
1442
- }
1443
-
1444
- .tds-radio-group legend{
1445
- float:left;
1446
- padding:0;
1447
- margin:0;
1359
+ .tds-checkbox:has(input:indeterminate){
1360
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1448
1361
  }
1449
1362
 
1450
- .tds-radio-group[aria-invalid="true"]{
1451
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1452
- --tds-radio-group-description-invalid-icon-display:inline-block;
1363
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1364
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1365
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1366
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1453
1367
  }
1454
1368
 
1455
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1456
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1369
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1370
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1371
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1457
1372
  }
1458
1373
 
1459
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1460
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1461
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1462
- }
1374
+ :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{
1375
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1376
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1377
+ }
1463
1378
 
1464
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1465
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1379
+ :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){
1380
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1381
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1466
1382
  }
1467
1383
 
1468
- .tds-radio-group:has(input:required) legend::after{
1384
+ .tds-checkbox:has(input:required) label::after{
1469
1385
  margin-left:.25ch;
1470
1386
  color:var(--t-text-color-status-error);
1471
1387
  content:"*";
1472
1388
  }
1473
1389
 
1474
- .tds-radio-group-fields{
1475
- display:flex;
1476
- flex-direction:column;
1477
- gap:var(--tds-radio-group-gap);
1478
- align-items:flex-start;
1479
- margin-top:var(--t-spacing-1);
1480
- }
1390
+ .tds-checkbox:has(input:disabled){
1391
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1392
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1481
1393
 
1482
- .tds-radio-group-description{
1394
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1395
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1396
+ --tds-checkbox-cursor:not-allowed;
1397
+ }
1398
+
1399
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1400
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1401
+ }
1402
+
1403
+ .tds-checkbox-description{
1483
1404
  display:flex;
1405
+ grid-area:2 / 2;
1484
1406
  gap:var(--t-spacing-half);
1485
1407
  align-items:flex-start;
1486
- margin:var(--t-spacing-fourth) 0 0;
1487
- font-size:var(--tds-radio-group-description-font-size);
1488
- line-height:var(--tds-radio-group-description-line-height);
1489
- color:var(--tds-radio-group-description-color);
1408
+ padding-inline-start:var(--t-spacing-1);
1409
+ margin:0;
1410
+ font-size:var(--tds-checkbox-description-font-size);
1411
+ line-height:var(--tds-checkbox-description-line-height);
1412
+ color:var(--tds-checkbox-description-color);
1490
1413
  cursor:text;
1491
1414
  }
1492
1415
 
1493
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1494
- display:var(--tds-radio-group-description-invalid-icon-display);
1416
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1417
+ display:var(--tds-checkbox-description-invalid-icon-display);
1495
1418
  flex-shrink:0;
1496
1419
  margin-top:calc(.5lh - .5em);
1497
- line-height:var(--tds-radio-group-description-line-height);
1420
+ line-height:var(--tds-checkbox-description-line-height);
1498
1421
  }
1499
1422
 
1500
- .tds-radio-group--sm{
1501
- --tds-radio-group-line-height:1.35;
1502
- --tds-radio-group-font-size:var(--t-font-size-sm);
1503
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1504
- --tds-radio-group-description-line-height:1.3;
1505
- }
1506
-
1507
- .tds-input:has(textarea){
1508
- --tds-input-padding-block:6px;
1509
- --tds-input-resizer-size:var(--t-element-size-sm);
1510
- --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");
1423
+ .tds-checkbox--sm{
1424
+ --tds-checkbox-line-height:1.35;
1425
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1426
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1427
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1428
+ --tds-checkbox-description-line-height:1.3;
1511
1429
  }
1512
1430
 
1513
- @supports (x: attr(x type(*))){
1514
-
1515
- .tds-input textarea{
1516
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1517
- }
1518
- }
1519
1431
 
1520
- .tds-input.tds-textarea--resize-vertical textarea{
1521
- resize:vertical;
1432
+ :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{
1433
+ -webkit-appearance:none;
1434
+ appearance:none;
1522
1435
  }
1523
1436
 
1524
- .tds-input.tds-textarea--resize-none textarea{
1525
- resize:none;
1437
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1438
+ inline-size:1em;
1439
+ block-size:2em;
1526
1440
  }
1441
+ @supports (field-sizing: content){
1442
+ .tds-input--auto-width{
1443
+ inline-size:-moz-fit-content;
1444
+ inline-size:fit-content;
1445
+ min-inline-size:min(100%, 122px);
1446
+ }
1527
1447
 
1528
- .tds-input.tds-textarea--resize-auto textarea{
1529
- resize:vertical;
1530
- }
1448
+ .tds-input--auto-width input{
1449
+ field-sizing:content;
1450
+ inline-size:auto;
1451
+ }
1452
+ }
1531
1453
 
1532
- @supports (field-sizing: content){
1533
- .tds-input.tds-textarea--resize-auto textarea{
1534
- field-sizing:content;
1535
- resize:none;
1536
- }
1537
- }
1538
1454
 
1539
- .tds-input textarea{
1540
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1541
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1542
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1543
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1544
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1545
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1546
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1547
- --tds-input-scrollbar-thumb-border-radius:999px;
1548
- --tds-input-scrollbar-thumb-border-width:3px;
1549
- --tds-input-scrollbar-track-margin-block:.125rem;
1550
- scrollbar-color:initial;
1551
- transition-timing-function:var(--t-ease-in-out);
1552
- transition-duration:var(--t-duration-200);
1553
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1455
+ @media (prefers-reduced-motion: no-preference){
1456
+
1457
+ :root{
1458
+ interpolate-size:allow-keywords;
1554
1459
  }
1460
+ }
1555
1461
 
1556
- @media (pointer: fine){
1557
- :is(.tds-input textarea)::-webkit-scrollbar{
1558
- width:12px;
1559
- height:12px;
1560
- cursor:default;
1561
- }
1462
+ @layer tds-component{
1463
+ tds-sidenav,
1464
+ .tds-sidenav{
1465
+ --tds-sidenav-indent:12px;
1466
+ --tds-sidenav-item-depth:0;
1562
1467
 
1563
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1564
- cursor:default;
1565
- background:var(--tds-input-scrollbar-thumb-color);
1566
- background-clip:content-box;
1567
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1568
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1569
- }
1468
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1570
1469
 
1571
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1572
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1573
- }
1470
+ --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;
1471
+ --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;
1472
+ --tds-sidenav-collapse-closed-opacity:0;
1473
+ --tds-sidenav-collapse-open-opacity:1;
1474
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1475
+ --tds-sidenav-collapse-open-transform:translateY(0);
1574
1476
 
1575
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1576
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1577
- }
1477
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1478
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1479
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1480
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1578
1481
 
1579
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1580
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1581
- }
1482
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1483
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1484
+ --tds-sidenav-item-nested-background-selected:transparent;
1582
1485
 
1583
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1584
- background:var(--tds-input-scrollbar-surface-color);
1585
- }
1486
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1487
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1488
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1586
1489
 
1587
- :is(.tds-input textarea)::-webkit-resizer{
1588
- background:var(--tds-input-resizer-icon) no-repeat;
1589
- background-position:right bottom;
1590
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1591
- }
1490
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1491
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1492
+ }
1592
1493
 
1593
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1594
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1595
- cursor:default;
1494
+ @media (prefers-reduced-motion: reduce){
1495
+ tds-sidenav,
1496
+ .tds-sidenav{
1497
+ --tds-sidenav-collapse-transition-enter:none;
1498
+ --tds-sidenav-collapse-transition-exit:none;
1499
+ --tds-sidenav-collapse-closed-transform:none;
1500
+ --tds-sidenav-collapse-open-transform:none;
1501
+ }
1596
1502
  }
1597
1503
 
1598
- @supports (-moz-appearance: none){
1599
- :is(.tds-input textarea){
1600
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1601
- scrollbar-width:thin;
1602
- }
1603
-
1604
- @media (hover){
1605
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1606
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1607
- }
1608
- }
1609
- }
1504
+ .tds-sidenav--theme-gray{
1505
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1506
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1507
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1508
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1509
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1610
1510
  }
1611
-
1612
- .tds-modal-overlay{
1613
- --tds-modal-min-margin-block:var(--t-spacing-3);
1614
-
1615
- position:fixed;
1616
- inset:0;
1617
- z-index:1000;
1618
- display:grid;
1619
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1620
- justify-items:center;
1621
- overflow-y:auto;
1622
- background:hsl(0 0% 0% / 40%);
1623
1511
  }
1624
1512
 
1625
- .tds-modal-overlay[data-entering]{
1626
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1513
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1514
+ display:flex;
1627
1515
  }
1628
1516
 
1629
- .tds-modal-overlay[data-exiting]{
1630
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1517
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1518
+ flex-direction:column;
1519
+ gap:var(--t-spacing-half);
1520
+ width:100%;
1631
1521
  }
1632
1522
 
1633
- @keyframes tds-modal-overlay-fade{
1634
- from{
1635
- opacity:0;
1636
- }
1523
+ .tds-sidenav-section-list{
1524
+ width:100%;
1525
+ padding:0;
1526
+ margin:0;
1527
+ list-style:none;
1637
1528
  }
1638
1529
 
1639
- .tds-modal-frame{
1640
- --tds-modal-width:600px;
1641
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1530
+ .tds-sidenav-section-header{
1642
1531
  display:flex;
1643
-
1644
- grid-row:2;
1645
- justify-content:center;
1646
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1532
+ align-items:baseline;
1533
+ justify-content:space-between;
1534
+ padding-top:var(--t-spacing-2);
1647
1535
  }
1648
1536
 
1649
- .tds-modal-frame[data-entering]{
1650
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1537
+ .tds-sidenav-section-header h2{
1538
+ margin:0;
1539
+ font-size:var(--t-font-size-sm);
1540
+ font-weight:var(--t-font-weight-semibold);
1541
+ line-height:1.35;
1542
+ color:var(--t-text-color-secondary);
1543
+ text-transform:uppercase;
1651
1544
  }
1652
1545
 
1653
- .tds-modal-frame[data-exiting]{
1654
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1546
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1547
+ padding-top:0;
1655
1548
  }
1656
1549
 
1657
- .tds-modal-frame--sm{
1658
- --tds-modal-width:400px;
1659
- }
1550
+ .tds-sidenav-section-header [slot="label-actions"]{
1551
+ display:flex;
1552
+ gap:var(--t-spacing-half);
1553
+ align-items:center;
1554
+ }
1660
1555
 
1661
- .tds-modal-frame--lg{
1662
- --tds-modal-width:800px;
1556
+ .tds-sidenav-section [slot="section-actions"]{
1557
+ display:flex;
1558
+ gap:12px;
1559
+ align-items:center;
1560
+ min-height:42px;
1561
+ padding:var(--t-spacing-1) 0;
1663
1562
  }
1664
1563
 
1665
- .tds-modal-frame--xl{
1666
- --tds-modal-width:1000px;
1564
+ .tds-sidenav-section-list,
1565
+ .tds-sidenav-item{
1566
+ width:100%;
1567
+ padding:0;
1568
+ margin:0;
1667
1569
  }
1668
1570
 
1669
- @keyframes tds-modal-zoom{
1670
- from{
1671
- opacity:0;
1672
- scale:.96;
1571
+ .tds-sidenav-item :is(a,button){
1572
+ position:relative;
1573
+ display:flex;
1574
+ gap:12px;
1575
+ align-items:center;
1576
+ width:100%;
1577
+ padding:12px;
1578
+ overflow:hidden;
1579
+ font-size:var(--t-font-size-sm);
1580
+ line-height:18px;
1581
+ color:var(--t-text-color-headline);
1582
+ white-space:nowrap;
1583
+ text-decoration:none;
1584
+ -webkit-appearance:none;
1585
+ -moz-appearance:none;
1586
+ appearance:none;
1587
+ cursor:pointer;
1588
+ background-color:var(--tds-sidenav-item-background, transparent);
1589
+ border:0;
1590
+ border-radius:var(--t-border-radius);
1591
+ transition:var(--tds-sidenav-item-transition);
1673
1592
  }
1674
- }
1675
1593
 
1676
- @media (prefers-reduced-motion: reduce){
1677
- .tds-modal-overlay[data-entering],
1678
- .tds-modal-overlay[data-exiting],
1679
- .tds-modal-frame[data-entering],
1680
- .tds-modal-frame[data-exiting]{
1681
- animation:none;
1682
- }
1683
- }
1594
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1595
+ display:block;
1596
+ flex:1;
1597
+ overflow:hidden;
1598
+ text-overflow:ellipsis;
1599
+ text-align:left;
1600
+ white-space:nowrap;
1601
+ }
1684
1602
 
1685
- .tds-modal{
1686
- display:flex;
1687
- flex-direction:column;
1688
- width:100%;
1689
- padding-block-start:var(--t-spacing-3);
1690
- padding-inline:0;
1691
- background:var(--t-surface-color-card);
1603
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1604
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1605
+ color:var(--t-text-color-headline);
1606
+ text-decoration:none;
1607
+ }
1692
1608
 
1693
- border:0;
1694
- border-radius:var(--t-border-radius-lg);
1695
- box-shadow:0 4px 18px 0 #0003;
1696
- }
1609
+ :is(.tds-sidenav-item :is(a,button)):active{
1610
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1611
+ }
1697
1612
 
1698
- .tds-modal:focus{
1699
- outline:none;
1700
- }
1613
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1614
+ overflow:hidden;
1615
+ color:var(--tds-sidenav-item-icon-color);
1616
+ }
1701
1617
 
1702
- .tds-modal-header{
1703
- display:grid;
1704
- grid-template-columns:1fr auto;
1705
- -moz-column-gap:var(--t-spacing-2);
1706
- column-gap:var(--t-spacing-2);
1707
- padding-block:0;
1708
- padding-inline:var(--t-spacing-4);
1709
- }
1710
-
1711
- .tds-modal-title{
1712
- grid-row:1;
1713
- grid-column:1;
1714
- margin:0;
1715
- font-size:var(--t-font-size-2xl);
1716
- font-weight:var(--t-font-weight-medium);
1717
- line-height:140%;
1718
- color:var(--t-text-color-headline);
1719
- }
1720
-
1721
- .tds-modal-subtitle{
1722
- grid-row:2;
1723
- grid-column:1;
1724
- margin:0;
1725
- font-size:var(--t-font-size-md);
1726
- font-weight:var(--t-font-weight-medium);
1727
- line-height:140%;
1728
- color:var(--t-text-color-secondary);
1729
- }
1730
-
1731
- .tds-modal-close{
1732
- grid-row:1;
1733
- grid-column:2;
1734
- align-self:center;
1735
- color:var(--t-icon-color-dim);
1736
- }
1618
+ :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{
1619
+ display:block;
1620
+ width:var(--tds-sidenav-item-icon-size);
1621
+ height:var(--tds-sidenav-item-icon-size);
1622
+ }
1737
1623
 
1738
- .tds-modal-body{
1739
- padding-block:var(--t-spacing-3);
1740
- padding-inline:var(--t-spacing-4);
1741
- }
1624
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1625
+ --tds-sidenav-indent:19px;
1626
+ }
1742
1627
 
1743
- .tds-modal-body--full-width{
1744
- padding-inline:0;
1745
- }
1628
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1629
+ visibility:visible;
1630
+ block-size:auto;
1631
+ opacity:1;
1632
+ }
1746
1633
 
1747
- .tds-modal-footer{
1748
- display:flex;
1749
- gap:var(--t-spacing-2);
1750
- align-items:center;
1751
- justify-content:flex-end;
1752
- padding-block:var(--t-spacing-3);
1753
- padding-inline:var(--t-spacing-4);
1754
- border-top:1px solid var(--t-border-color);
1755
- }
1634
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1635
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1636
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1756
1637
 
1757
- .tds-modal-footer > [slot="start"]{
1758
- margin-inline-end:auto;
1759
- }
1638
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1639
+ font-weight:var(--t-font-weight-semibold);
1640
+ }
1760
1641
 
1761
- @media (min-width: 720px){
1762
- .tds-modal-overlay{
1763
- --tds-modal-min-margin-block:0;
1642
+ .tds-sidenav-item:has(.tds-sidenav-section){
1643
+ display:flex;
1644
+ flex-direction:column;
1645
+ gap:var(--t-spacing-half);
1764
1646
  }
1765
1647
 
1766
- .tds-modal-footer{
1767
- position:sticky;
1768
- bottom:0;
1769
- background:var(--t-surface-color-card);
1770
- border-end-start-radius:var(--t-border-radius-lg);
1771
- border-end-end-radius:var(--t-border-radius-lg);
1648
+ .tds-sidenav-item .tds-sidenav-section-list{
1649
+ --tds-sidenav-item-depth:1;
1650
+ gap:0;
1772
1651
  }
1773
- }
1774
1652
 
1775
- .tds-toggle-switch{
1776
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1777
- --tds-toggle-switch-cursor:pointer;
1778
- --tds-toggle-switch-display:inline-grid;
1779
- --tds-toggle-switch-line-height:1.4;
1653
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1654
+ visibility:hidden;
1655
+ block-size:0;
1656
+ overflow-y:clip;
1657
+ opacity:0;
1658
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1659
+ }
1780
1660
 
1781
- --tds-toggle-switch-label-color:var(--t-form-color);
1661
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1662
+ --tds-sidenav-item-depth:2;
1663
+ }
1782
1664
 
1783
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1784
- --tds-toggle-switch-track-outline:none;
1785
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1786
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1787
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1665
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1666
+ min-height:var(--t-element-size-2xl);
1667
+ padding-block:9px;
1668
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1669
+ line-height:1;
1670
+ background-color:transparent;
1671
+ }
1788
1672
 
1789
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1790
- --tds-toggle-switch-thumb-transform:translateX(0);
1791
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1673
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1674
+ position:absolute;
1675
+ top:0;
1676
+ bottom:0;
1677
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1678
+ width:2px;
1679
+ content:"";
1680
+ background-color:var(--tds-sidenav-item-nested-border-color);
1681
+ transition:var(--tds-sidenav-item-transition);
1682
+ }
1792
1683
 
1793
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1794
- --tds-toggle-switch-description-line-height:1.35;
1795
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1796
- position:relative;
1684
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1685
+ position:absolute;
1686
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1687
+ z-index:-1;
1688
+ height:100%;
1689
+ content:"";
1690
+ background-color:var(--tds-sidenav-item-nested-background);
1691
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1692
+ transition:var(--tds-sidenav-item-transition);
1693
+ }
1797
1694
 
1798
- display:var(--tds-toggle-switch-display);
1799
- grid-template-columns:auto;
1800
- grid-auto-columns:1fr;
1801
- gap:var(--t-spacing-fourth) 0;
1802
- -webkit-user-select:none;
1803
- -moz-user-select:none;
1804
- user-select:none;
1805
- }
1695
+ :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)){
1696
+ display:block;
1697
+ text-align:left;
1698
+ white-space:normal;
1699
+ }
1806
1700
 
1807
- .tds-toggle-switch input[type="checkbox"]{
1808
- position:absolute;
1809
- width:var(--tds-toggle-switch-track-width);
1810
- height:var(--tds-toggle-switch-track-height);
1811
- margin:0;
1812
- -webkit-appearance:none;
1813
- -moz-appearance:none;
1814
- appearance:none;
1815
- cursor:var(--tds-toggle-switch-cursor);
1816
- outline:var(--tds-toggle-switch-track-outline);
1817
- outline-offset:var(--t-focus-ring-offset);
1818
- background-color:transparent;
1819
- border:0;
1820
- border-radius:var(--t-border-radius-round);
1821
- }
1701
+ :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{
1702
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1703
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1704
+ }
1822
1705
 
1823
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1824
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1706
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1707
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1708
+ }
1709
+
1710
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1711
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1712
+ font-weight:var(--t-font-weight-medium);
1825
1713
  }
1826
1714
 
1827
- .tds-toggle-switch label{
1828
- display:inline-flex;
1829
- grid-area:1 / 2;
1830
- padding-inline-start:var(--t-spacing-1);
1831
- margin-top:-.09375em;
1832
- font-size:var(--tds-toggle-switch-font-size);
1833
- font-weight:var(--t-font-weight-normal);
1834
- line-height:var(--tds-toggle-switch-line-height);
1835
- color:var(--tds-toggle-switch-label-color);
1836
- cursor:var(--tds-toggle-switch-cursor);
1837
- }
1715
+ .tds-sidenav-responsive-header{
1716
+ display:flex;
1717
+ gap:var(--t-spacing-2);
1718
+ align-items:center;
1719
+ width:100%;
1720
+ }
1838
1721
 
1839
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1840
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1722
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1723
+ order:0;
1841
1724
  }
1842
1725
 
1843
- .tds-toggle-switch:has(input:checked){
1844
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1845
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1726
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1727
+ flex:1;
1728
+ order:1;
1729
+ margin:0;
1730
+ font-size:var(--t-font-size-lg);
1731
+ font-weight:var(--t-font-weight-medium);
1732
+ color:var(--t-text-color-headline);
1846
1733
  }
1847
1734
 
1848
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1849
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1850
- }
1851
-
1852
- .tds-toggle-switch:has(input:disabled){
1853
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1854
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1855
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1856
- --tds-toggle-switch-cursor:not-allowed;
1735
+ @media (max-width: 719px){
1736
+ .tds-sidenav-collapse{
1737
+ z-index:10001;
1738
+ display:none;
1739
+ max-width:min(448px, calc(100vw - 48px));
1740
+ padding:0;
1741
+ margin:12px 0;
1742
+ position-area:bottom span-right;
1743
+ overflow:hidden;
1744
+ outline:0;
1745
+ background:var(--t-surface-color-card);
1746
+ border:0;
1747
+ border-radius:6px;
1748
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1749
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1750
+ transform:var(--tds-sidenav-collapse-open-transform);
1751
+ transition:var(--tds-sidenav-collapse-transition-enter);
1752
+ will-change:transform;
1857
1753
  }
1858
1754
 
1859
- .tds-toggle-switch-track{
1860
- position:relative;
1861
- flex-shrink:0;
1862
- width:var(--tds-toggle-switch-track-width);
1863
- height:var(--tds-toggle-switch-track-height);
1864
- background-color:var(--tds-toggle-switch-track-background-color);
1865
- border-radius:var(--t-border-radius-round);
1866
- transition:var(--tds-toggle-switch-track-transition);
1867
- }
1755
+ .tds-sidenav-scroll-container{
1756
+ --webkit-overflow-scrolling:touch;
1757
+ display:block;
1758
+ width:100%;
1759
+ height:-moz-fit-content;
1760
+ height:fit-content;
1761
+ padding:var(--t-spacing-2);
1762
+ overflow-y:auto;
1763
+ }
1868
1764
 
1869
- .tds-toggle-switch-track::before{
1870
- position:absolute;
1871
- top:var(--t-spacing-fourth);
1872
- left:var(--t-spacing-fourth);
1873
- width:var(--tds-toggle-switch-thumb-size);
1874
- height:var(--tds-toggle-switch-thumb-size);
1875
- content:"";
1876
- background-color:#fff;
1877
- border-radius:var(--t-border-radius-round);
1878
- transform:var(--tds-toggle-switch-thumb-transform);
1879
- transition:var(--tds-toggle-switch-thumb-transition);
1765
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1766
+ display:none;
1880
1767
  }
1768
+ @supports selector(:popover-open){
1769
+ .tds-sidenav-collapse:popover-open{
1770
+ display:flex;
1771
+ }
1881
1772
 
1882
- @media (prefers-reduced-motion: reduce){
1773
+ .tds-sidenav-collapse:not(:popover-open){
1774
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1775
+ transition:var(--tds-sidenav-collapse-transition-exit);
1776
+ }
1883
1777
 
1884
- .tds-toggle-switch-track{
1885
- --tds-toggle-switch-track-transition:none;
1886
- --tds-toggle-switch-thumb-transition:none;
1887
- }
1778
+ @starting-style{
1779
+ .tds-sidenav-collapse:popover-open{
1780
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1781
+ transform:var(--tds-sidenav-collapse-closed-transform);
1782
+ }
1783
+ }
1888
1784
  }
1785
+ @supports not selector(:popover-open){
1786
+ .tds-sidenav-collapse.\:popover-open{
1787
+ display:flex;
1788
+ }
1889
1789
 
1890
- .tds-toggle-switch-description{
1891
- display:flex;
1892
- grid-area:2 / 2;
1893
- align-items:flex-start;
1894
- padding-inline-start:var(--t-spacing-1);
1895
- margin:0;
1896
- font-size:var(--tds-toggle-switch-description-font-size);
1897
- line-height:var(--tds-toggle-switch-description-line-height);
1898
- color:var(--tds-toggle-switch-description-color);
1899
- cursor:text;
1900
- }
1901
-
1902
- .tds-toggle-switch--sm{
1903
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1904
- --tds-toggle-switch-line-height:1.35;
1905
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1906
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1907
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1908
- --tds-toggle-switch-description-line-height:1.3;
1790
+ .tds-sidenav-collapse:not(.\:popover-open){
1791
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1792
+ transition:var(--tds-sidenav-collapse-transition-exit);
1793
+ }
1794
+ }
1909
1795
  }
1910
1796
 
1911
- .tds-toggle-switch--hide-label{
1912
- --tds-toggle-switch-display:inline-flex;
1797
+ @media (min-width: 720px){
1798
+ .tds-sidenav-responsive-header{
1799
+ display:none;
1800
+ }
1913
1801
  }
1914
1802
 
1803
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1804
+ display:none;
1805
+ }
1915
1806
 
1916
- @media (prefers-reduced-motion: no-preference){
1917
-
1918
- :root{
1919
- interpolate-size:allow-keywords;
1920
- }
1921
- }
1807
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1808
+ display:block;
1809
+ }
1922
1810
 
1923
- @layer tds-component{
1924
- tds-sidenav,
1925
- .tds-sidenav{
1926
- --tds-sidenav-indent:12px;
1927
- --tds-sidenav-item-depth:0;
1811
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1812
+ display:flex;
1813
+ flex-direction:column;
1814
+ }
1928
1815
 
1929
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1816
+ .tds-radio{
1817
+ --tds-radio-font-size:var(--t-font-size-md);
1818
+ --tds-radio-cursor:pointer;
1819
+ --tds-radio-line-height:1.4;
1820
+ --tds-radio-transition-property:border-width;
1930
1821
 
1931
- --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;
1932
- --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;
1933
- --tds-sidenav-collapse-closed-opacity:0;
1934
- --tds-sidenav-collapse-open-opacity:1;
1935
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
1936
- --tds-sidenav-collapse-open-transform:translateY(0);
1822
+ --tds-radio-input-size:var(--t-element-size-md);
1823
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1824
+ --tds-radio-input-border-color:var(--t-form-border-color);
1825
+ --tds-radio-input-border-width:var(--t-form-border-width);
1826
+ --tds-radio-input-background-color:var(--t-form-background-color);
1937
1827
 
1938
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1939
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1940
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1941
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1828
+ --tds-radio-label-color:var(--t-form-color);
1942
1829
 
1943
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1944
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1945
- --tds-sidenav-item-nested-background-selected:transparent;
1830
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1831
+ --tds-radio-description-line-height:1.35;
1832
+ --tds-radio-description-color:var(--t-text-color-secondary);
1946
1833
 
1947
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1948
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1949
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1834
+ position:relative;
1835
+ display:inline-grid;
1836
+ grid-template-columns:auto;
1837
+ grid-auto-columns:1fr;
1838
+ gap:var(--t-spacing-fourth) 0;
1839
+ line-height:var(--tds-radio-line-height);
1840
+ -webkit-user-select:none;
1841
+ -moz-user-select:none;
1842
+ user-select:none;
1843
+ }
1950
1844
 
1951
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1952
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1845
+ .tds-radio label{
1846
+ grid-area:1 / 2;
1847
+ padding-inline-start:var(--t-spacing-1);
1848
+ font-size:var(--tds-radio-font-size);
1849
+ font-weight:var(--t-font-weight-normal);
1850
+ color:var(--tds-radio-label-color);
1851
+ cursor:var(--tds-radio-cursor);
1953
1852
  }
1954
1853
 
1955
- @media (prefers-reduced-motion: reduce){
1956
- tds-sidenav,
1957
- .tds-sidenav{
1958
- --tds-sidenav-collapse-transition-enter:none;
1959
- --tds-sidenav-collapse-transition-exit:none;
1960
- --tds-sidenav-collapse-closed-transform:none;
1961
- --tds-sidenav-collapse-open-transform:none;
1854
+ .tds-radio input[type="radio"]{
1855
+ position:relative;
1856
+ width:1em;
1857
+ height:1em;
1858
+ margin:calc((1lh - 1em) / 2) 0 0;
1859
+ font-size:var(--tds-radio-font-size);
1860
+ line-height:inherit;
1861
+ -webkit-appearance:none;
1862
+ -moz-appearance:none;
1863
+ appearance:none;
1864
+ cursor:var(--tds-radio-cursor);
1865
+ background-color:var(--tds-radio-input-background-color);
1866
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1867
+ border-radius:var(--tds-radio-input-border-radius);
1868
+ transition-timing-function:var(--t-ease-in-out);
1869
+ transition-duration:var(--t-duration-200);
1870
+ transition-property:var(--tds-radio-transition-property);
1962
1871
  }
1963
- }
1964
1872
 
1965
- .tds-sidenav--theme-gray{
1966
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1967
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1968
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1969
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1970
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1971
- }
1972
- }
1873
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1874
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1875
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1876
+ }
1973
1877
 
1974
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1975
- display:flex;
1976
- }
1878
+ :is(.tds-radio input[type="radio"]):focus-visible{
1879
+ outline:var(--t-focus-ring-outline);
1880
+ outline-offset:var(--t-focus-ring-offset);
1881
+ }
1977
1882
 
1978
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1979
- flex-direction:column;
1980
- gap:var(--t-spacing-half);
1981
- width:100%;
1982
- }
1883
+ :is(.tds-radio input[type="radio"]):disabled{
1884
+ pointer-events:none;
1885
+ }
1983
1886
 
1984
- .tds-sidenav-section-list{
1985
- width:100%;
1986
- padding:0;
1987
- margin:0;
1988
- list-style:none;
1989
- }
1887
+ @media (prefers-reduced-motion: reduce){
1990
1888
 
1991
- .tds-sidenav-section-header{
1992
- display:flex;
1993
- align-items:baseline;
1994
- justify-content:space-between;
1995
- padding-top:var(--t-spacing-2);
1996
- }
1889
+ .tds-radio input[type="radio"]{
1890
+ --tds-radio-transition-property:none;
1891
+ }
1892
+ }
1997
1893
 
1998
- .tds-sidenav-section-header h2{
1999
- margin:0;
2000
- font-size:var(--t-font-size-sm);
2001
- font-weight:var(--t-font-weight-semibold);
2002
- line-height:1.35;
2003
- color:var(--t-text-color-secondary);
2004
- text-transform:uppercase;
1894
+ .tds-radio:has(input:checked){
1895
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1896
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1897
+ --tds-radio-input-border-width:4px;
2005
1898
  }
2006
1899
 
2007
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2008
- padding-top:0;
1900
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1901
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1902
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1903
+ }
1904
+
1905
+ .tds-radio:has(input:user-invalid){
1906
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2009
1907
  }
2010
1908
 
2011
- .tds-sidenav-section-header [slot="label-actions"]{
2012
- display:flex;
2013
- gap:var(--t-spacing-half);
2014
- align-items:center;
1909
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1910
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1911
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1912
+ }
1913
+
1914
+ .tds-radio:has(input:disabled){
1915
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1916
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1917
+
1918
+ --tds-radio-label-color:var(--t-form-color-disabled);
1919
+ --tds-radio-description-color:var(--t-form-color-disabled);
1920
+ --tds-radio-cursor:not-allowed;
2015
1921
  }
2016
1922
 
2017
- .tds-sidenav-section [slot="section-actions"]{
1923
+ .tds-radio:has(input:disabled) input:checked{
1924
+ --tds-radio-input-background-color:var(--t-form-background-color);
1925
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1926
+ }
1927
+
1928
+ .tds-radio-description{
2018
1929
  display:flex;
2019
- gap:12px;
2020
- align-items:center;
2021
- min-height:42px;
2022
- padding:var(--t-spacing-1) 0;
1930
+ grid-area:2 / 2;
1931
+ gap:var(--t-spacing-half);
1932
+ align-items:flex-start;
1933
+ padding-inline-start:var(--t-spacing-1);
1934
+ margin:0;
1935
+ font-size:var(--tds-radio-description-font-size);
1936
+ line-height:var(--tds-radio-description-line-height);
1937
+ color:var(--tds-radio-description-color);
1938
+ cursor:text;
2023
1939
  }
2024
1940
 
2025
- .tds-sidenav-section-list,
2026
- .tds-sidenav-item{
2027
- width:100%;
2028
- padding:0;
2029
- margin:0;
1941
+ .tds-radio--sm{
1942
+ --tds-radio-line-height:1.35;
1943
+ --tds-radio-input-size:var(--t-element-size-sm);
1944
+ --tds-radio-font-size:var(--t-font-size-sm);
1945
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1946
+ --tds-radio-description-line-height:1.3;
2030
1947
  }
2031
1948
 
2032
- .tds-sidenav-item :is(a,button){
2033
- position:relative;
2034
- display:flex;
2035
- gap:12px;
2036
- align-items:center;
2037
- width:100%;
2038
- padding:12px;
2039
- overflow:hidden;
2040
- font-size:var(--t-font-size-sm);
2041
- line-height:18px;
2042
- color:var(--t-text-color-headline);
2043
- white-space:nowrap;
2044
- text-decoration:none;
2045
- -webkit-appearance:none;
2046
- -moz-appearance:none;
2047
- appearance:none;
2048
- cursor:pointer;
2049
- background-color:var(--tds-sidenav-item-background, transparent);
2050
- border:0;
2051
- border-radius:var(--t-border-radius);
2052
- transition:var(--tds-sidenav-item-transition);
1949
+ .tds-input:has(textarea){
1950
+ --tds-input-padding-block:6px;
1951
+ --tds-input-resizer-size:var(--t-element-size-sm);
1952
+ --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");
1953
+ }
1954
+
1955
+ @supports (x: attr(x type(*))){
1956
+
1957
+ .tds-input textarea{
1958
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1959
+ }
2053
1960
  }
2054
1961
 
2055
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2056
- display:block;
2057
- flex:1;
2058
- overflow:hidden;
2059
- text-overflow:ellipsis;
2060
- text-align:left;
2061
- white-space:nowrap;
1962
+ .tds-input.tds-textarea--resize-vertical textarea{
1963
+ resize:vertical;
2062
1964
  }
2063
1965
 
2064
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2065
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2066
- color:var(--t-text-color-headline);
2067
- text-decoration:none;
1966
+ .tds-input.tds-textarea--resize-none textarea{
1967
+ resize:none;
2068
1968
  }
2069
1969
 
2070
- :is(.tds-sidenav-item :is(a,button)):active{
2071
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1970
+ .tds-input.tds-textarea--resize-auto textarea{
1971
+ resize:vertical;
2072
1972
  }
2073
1973
 
2074
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2075
- overflow:hidden;
2076
- color:var(--tds-sidenav-item-icon-color);
1974
+ @supports (field-sizing: content){
1975
+ .tds-input.tds-textarea--resize-auto textarea{
1976
+ field-sizing:content;
1977
+ resize:none;
1978
+ }
2077
1979
  }
2078
1980
 
2079
- :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{
2080
- display:block;
2081
- width:var(--tds-sidenav-item-icon-size);
2082
- height:var(--tds-sidenav-item-icon-size);
2083
- }
1981
+ .tds-input textarea{
1982
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1983
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1984
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1985
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1986
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1987
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1988
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1989
+ --tds-input-scrollbar-thumb-border-radius:999px;
1990
+ --tds-input-scrollbar-thumb-border-width:3px;
1991
+ --tds-input-scrollbar-track-margin-block:.125rem;
1992
+ scrollbar-color:initial;
1993
+ transition-timing-function:var(--t-ease-in-out);
1994
+ transition-duration:var(--t-duration-200);
1995
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1996
+ }
2084
1997
 
2085
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2086
- --tds-sidenav-indent:19px;
1998
+ @media (pointer: fine){
1999
+ :is(.tds-input textarea)::-webkit-scrollbar{
2000
+ width:12px;
2001
+ height:12px;
2002
+ cursor:default;
2087
2003
  }
2088
2004
 
2089
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2090
- visibility:visible;
2091
- block-size:auto;
2092
- opacity:1;
2005
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2006
+ cursor:default;
2007
+ background:var(--tds-input-scrollbar-thumb-color);
2008
+ background-clip:content-box;
2009
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2010
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2093
2011
  }
2094
2012
 
2095
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2096
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2097
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2098
-
2099
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2100
- font-weight:var(--t-font-weight-semibold);
2101
- }
2013
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2014
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2015
+ }
2102
2016
 
2103
- .tds-sidenav-item:has(.tds-sidenav-section){
2104
- display:flex;
2105
- flex-direction:column;
2106
- gap:var(--t-spacing-half);
2107
- }
2017
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2018
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2019
+ }
2108
2020
 
2109
- .tds-sidenav-item .tds-sidenav-section-list{
2110
- --tds-sidenav-item-depth:1;
2111
- gap:0;
2112
- }
2021
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2022
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2023
+ }
2113
2024
 
2114
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2115
- visibility:hidden;
2116
- block-size:0;
2117
- overflow-y:clip;
2118
- opacity:0;
2119
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2025
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2026
+ background:var(--tds-input-scrollbar-surface-color);
2120
2027
  }
2121
2028
 
2122
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2123
- --tds-sidenav-item-depth:2;
2029
+ :is(.tds-input textarea)::-webkit-resizer{
2030
+ background:var(--tds-input-resizer-icon) no-repeat;
2031
+ background-position:right bottom;
2032
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2124
2033
  }
2125
2034
 
2126
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2127
- min-height:var(--t-element-size-2xl);
2128
- padding-block:9px;
2129
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2130
- line-height:1;
2131
- background-color:transparent;
2035
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2036
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2037
+ cursor:default;
2132
2038
  }
2133
2039
 
2134
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2135
- position:absolute;
2136
- top:0;
2137
- bottom:0;
2138
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2139
- width:2px;
2140
- content:"";
2141
- background-color:var(--tds-sidenav-item-nested-border-color);
2142
- transition:var(--tds-sidenav-item-transition);
2040
+ @supports (-moz-appearance: none){
2041
+ :is(.tds-input textarea){
2042
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2043
+ scrollbar-width:thin;
2143
2044
  }
2144
2045
 
2145
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2146
- position:absolute;
2147
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2148
- z-index:-1;
2149
- height:100%;
2150
- content:"";
2151
- background-color:var(--tds-sidenav-item-nested-background);
2152
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2153
- transition:var(--tds-sidenav-item-transition);
2046
+ @media (hover){
2047
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2048
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2049
+ }
2154
2050
  }
2051
+ }
2052
+ }
2155
2053
 
2156
- :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)){
2157
- display:block;
2158
- text-align:left;
2159
- white-space:normal;
2160
- }
2054
+ .tds-toggle-switch{
2055
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2056
+ --tds-toggle-switch-cursor:pointer;
2057
+ --tds-toggle-switch-display:inline-grid;
2058
+ --tds-toggle-switch-line-height:1.4;
2059
+
2060
+ --tds-toggle-switch-label-color:var(--t-form-color);
2161
2061
 
2162
- :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{
2163
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2164
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2165
- }
2062
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2063
+ --tds-toggle-switch-track-outline:none;
2064
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2065
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2066
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2166
2067
 
2167
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2168
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2169
- }
2068
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2069
+ --tds-toggle-switch-thumb-transform:translateX(0);
2070
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2170
2071
 
2171
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2172
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2173
- font-weight:var(--t-font-weight-medium);
2174
- }
2072
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2073
+ --tds-toggle-switch-description-line-height:1.35;
2074
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2075
+ position:relative;
2175
2076
 
2176
- .tds-sidenav-responsive-header{
2177
- display:flex;
2178
- gap:var(--t-spacing-2);
2179
- align-items:center;
2180
- width:100%;
2077
+ display:var(--tds-toggle-switch-display);
2078
+ grid-template-columns:auto;
2079
+ grid-auto-columns:1fr;
2080
+ gap:var(--t-spacing-fourth) 0;
2081
+ -webkit-user-select:none;
2082
+ -moz-user-select:none;
2083
+ user-select:none;
2181
2084
  }
2182
2085
 
2183
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2184
- order:0;
2185
- }
2186
-
2187
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2188
- flex:1;
2189
- order:1;
2086
+ .tds-toggle-switch input[type="checkbox"]{
2087
+ position:absolute;
2088
+ width:var(--tds-toggle-switch-track-width);
2089
+ height:var(--tds-toggle-switch-track-height);
2190
2090
  margin:0;
2191
- font-size:var(--t-font-size-lg);
2192
- font-weight:var(--t-font-weight-medium);
2193
- color:var(--t-text-color-headline);
2091
+ -webkit-appearance:none;
2092
+ -moz-appearance:none;
2093
+ appearance:none;
2094
+ cursor:var(--tds-toggle-switch-cursor);
2095
+ outline:var(--tds-toggle-switch-track-outline);
2096
+ outline-offset:var(--t-focus-ring-offset);
2097
+ background-color:transparent;
2098
+ border:0;
2099
+ border-radius:var(--t-border-radius-round);
2194
2100
  }
2195
2101
 
2196
- @media (max-width: 719px){
2197
- .tds-sidenav-collapse{
2198
- z-index:10001;
2199
- display:none;
2200
- max-width:min(448px, calc(100vw - 48px));
2201
- padding:0;
2202
- margin:12px 0;
2203
- position-area:bottom span-right;
2204
- overflow:hidden;
2205
- outline:0;
2206
- background:var(--t-surface-color-card);
2207
- border:0;
2208
- border-radius:6px;
2209
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2210
- opacity:var(--tds-sidenav-collapse-open-opacity);
2211
- transform:var(--tds-sidenav-collapse-open-transform);
2212
- transition:var(--tds-sidenav-collapse-transition-enter);
2213
- will-change:transform;
2102
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2103
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2104
+ }
2105
+
2106
+ .tds-toggle-switch label{
2107
+ display:inline-flex;
2108
+ grid-area:1 / 2;
2109
+ padding-inline-start:var(--t-spacing-1);
2110
+ margin-top:-.09375em;
2111
+ font-size:var(--tds-toggle-switch-font-size);
2112
+ font-weight:var(--t-font-weight-normal);
2113
+ line-height:var(--tds-toggle-switch-line-height);
2114
+ color:var(--tds-toggle-switch-label-color);
2115
+ cursor:var(--tds-toggle-switch-cursor);
2214
2116
  }
2215
2117
 
2216
- .tds-sidenav-scroll-container{
2217
- --webkit-overflow-scrolling:touch;
2218
- display:block;
2219
- width:100%;
2220
- height:-moz-fit-content;
2221
- height:fit-content;
2222
- padding:var(--t-spacing-2);
2223
- overflow-y:auto;
2118
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2119
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2224
2120
  }
2225
2121
 
2226
- .tds-sidenav-item :is(a, button) :is(.prefix){
2227
- display:none;
2122
+ .tds-toggle-switch:has(input:checked){
2123
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2124
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2228
2125
  }
2229
- @supports selector(:popover-open){
2230
- .tds-sidenav-collapse:popover-open{
2231
- display:flex;
2232
- }
2233
2126
 
2234
- .tds-sidenav-collapse:not(:popover-open){
2235
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2236
- transition:var(--tds-sidenav-collapse-transition-exit);
2127
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2128
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2237
2129
  }
2238
2130
 
2239
- @starting-style{
2240
- .tds-sidenav-collapse:popover-open{
2241
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2242
- transform:var(--tds-sidenav-collapse-closed-transform);
2243
- }
2244
- }
2131
+ .tds-toggle-switch:has(input:disabled){
2132
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2133
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2134
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2135
+ --tds-toggle-switch-cursor:not-allowed;
2245
2136
  }
2246
- @supports not selector(:popover-open){
2247
- .tds-sidenav-collapse.\:popover-open{
2248
- display:flex;
2249
- }
2250
2137
 
2251
- .tds-sidenav-collapse:not(.\:popover-open){
2252
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2253
- transition:var(--tds-sidenav-collapse-transition-exit);
2254
- }
2255
- }
2138
+ .tds-toggle-switch-track{
2139
+ position:relative;
2140
+ flex-shrink:0;
2141
+ width:var(--tds-toggle-switch-track-width);
2142
+ height:var(--tds-toggle-switch-track-height);
2143
+ background-color:var(--tds-toggle-switch-track-background-color);
2144
+ border-radius:var(--t-border-radius-round);
2145
+ transition:var(--tds-toggle-switch-track-transition);
2256
2146
  }
2257
2147
 
2258
- @media (min-width: 720px){
2259
- .tds-sidenav-responsive-header{
2260
- display:none;
2148
+ .tds-toggle-switch-track::before{
2149
+ position:absolute;
2150
+ top:var(--t-spacing-fourth);
2151
+ left:var(--t-spacing-fourth);
2152
+ width:var(--tds-toggle-switch-thumb-size);
2153
+ height:var(--tds-toggle-switch-thumb-size);
2154
+ content:"";
2155
+ background-color:#fff;
2156
+ border-radius:var(--t-border-radius-round);
2157
+ transform:var(--tds-toggle-switch-thumb-transform);
2158
+ transition:var(--tds-toggle-switch-thumb-transition);
2261
2159
  }
2160
+
2161
+ @media (prefers-reduced-motion: reduce){
2162
+
2163
+ .tds-toggle-switch-track{
2164
+ --tds-toggle-switch-track-transition:none;
2165
+ --tds-toggle-switch-thumb-transition:none;
2262
2166
  }
2167
+ }
2263
2168
 
2264
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2265
- display:none;
2266
- }
2169
+ .tds-toggle-switch-description{
2170
+ display:flex;
2171
+ grid-area:2 / 2;
2172
+ align-items:flex-start;
2173
+ padding-inline-start:var(--t-spacing-1);
2174
+ margin:0;
2175
+ font-size:var(--tds-toggle-switch-description-font-size);
2176
+ line-height:var(--tds-toggle-switch-description-line-height);
2177
+ color:var(--tds-toggle-switch-description-color);
2178
+ cursor:text;
2179
+ }
2267
2180
 
2268
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2269
- display:block;
2270
- }
2181
+ .tds-toggle-switch--sm{
2182
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2183
+ --tds-toggle-switch-line-height:1.35;
2184
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2185
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2186
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2187
+ --tds-toggle-switch-description-line-height:1.3;
2188
+ }
2271
2189
 
2272
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2273
- display:flex;
2274
- flex-direction:column;
2275
- }
2190
+ .tds-toggle-switch--hide-label{
2191
+ --tds-toggle-switch-display:inline-flex;
2192
+ }
2276
2193
 
2277
2194
  .tds-input{
2278
2195
  --tds-input-border-color:var(--t-form-border-color);
@@ -2375,42 +2292,125 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2375
2292
  --tds-input-color:var(--t-form-color-disabled);
2376
2293
  }
2377
2294
 
2378
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2379
- cursor:not-allowed;
2295
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2296
+ cursor:not-allowed;
2297
+ }
2298
+
2299
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
2300
+ --tds-input-border-color:var(--t-form-border-color-readonly);
2301
+ --tds-input-background-color:var(--t-form-background-color-readonly);
2302
+ }
2303
+
2304
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2305
+ border-color:var(--tds-input-border-color-hover);
2306
+ }
2307
+
2308
+ .tds-input.tds-input--lg{
2309
+ --tds-input-min-height:var(--t-container-size-lg);
2310
+ --tds-input-font-size:var(--t-font-size-lg);
2311
+ }
2312
+
2313
+ .tds-input-description{
2314
+ display:flex;
2315
+ gap:var(--t-spacing-half);
2316
+ align-items:flex-start;
2317
+ margin:0;
2318
+ font-size:var(--t-font-size-sm);
2319
+ line-height:1.35;
2320
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
2321
+ cursor:text;
2322
+ }
2323
+
2324
+ .tds-input-description .tds-input-description-invalid-icon{
2325
+ display:var(--tds-input-description-invalid-icon-display, none);
2326
+ flex-shrink:0;
2327
+ margin-block-start:calc(.5lh - .5em);
2328
+ line-height:1.35;
2329
+ }
2330
+
2331
+ .tds-radio-group{
2332
+ --tds-radio-group-font-size:var(--t-font-size-md);
2333
+ --tds-radio-group-line-height:1.4;
2334
+ --tds-radio-group-gap:var(--t-spacing-1);
2335
+
2336
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2337
+ --tds-radio-group-description-line-height:1.35;
2338
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2339
+ --tds-radio-group-description-invalid-icon-display:none;
2340
+ display:flex;
2341
+ flex-direction:column;
2342
+ gap:0;
2343
+ padding:0;
2344
+ margin:0;
2345
+
2346
+ font-size:var(--tds-radio-group-font-size);
2347
+ line-height:var(--tds-radio-group-line-height);
2348
+ border:0;
2349
+ }
2350
+
2351
+ .tds-radio-group legend{
2352
+ float:left;
2353
+ padding:0;
2354
+ margin:0;
2355
+ }
2356
+
2357
+ .tds-radio-group[aria-invalid="true"]{
2358
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2359
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2360
+ }
2361
+
2362
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2363
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2380
2364
  }
2381
2365
 
2382
- .tds-input:where(:has(:is(input,textarea)[readonly])){
2383
- --tds-input-border-color:var(--t-form-border-color-readonly);
2384
- --tds-input-background-color:var(--t-form-background-color-readonly);
2385
- }
2366
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2367
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2368
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2369
+ }
2386
2370
 
2387
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2388
- border-color:var(--tds-input-border-color-hover);
2371
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2372
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2373
+ }
2374
+
2375
+ .tds-radio-group:has(input:required) legend::after{
2376
+ margin-left:.25ch;
2377
+ color:var(--t-text-color-status-error);
2378
+ content:"*";
2389
2379
  }
2390
2380
 
2391
- .tds-input.tds-input--lg{
2392
- --tds-input-min-height:var(--t-container-size-lg);
2393
- --tds-input-font-size:var(--t-font-size-lg);
2394
- }
2381
+ .tds-radio-group-fields{
2382
+ display:flex;
2383
+ flex-direction:column;
2384
+ gap:var(--tds-radio-group-gap);
2385
+ align-items:flex-start;
2386
+ margin-top:var(--t-spacing-1);
2387
+ }
2395
2388
 
2396
- .tds-input-description{
2389
+ .tds-radio-group-description{
2397
2390
  display:flex;
2398
2391
  gap:var(--t-spacing-half);
2399
2392
  align-items:flex-start;
2400
- margin:0;
2401
- font-size:var(--t-font-size-sm);
2402
- line-height:1.35;
2403
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
2393
+ margin:var(--t-spacing-fourth) 0 0;
2394
+ font-size:var(--tds-radio-group-description-font-size);
2395
+ line-height:var(--tds-radio-group-description-line-height);
2396
+ color:var(--tds-radio-group-description-color);
2404
2397
  cursor:text;
2405
2398
  }
2406
2399
 
2407
- .tds-input-description .tds-input-description-invalid-icon{
2408
- display:var(--tds-input-description-invalid-icon-display, none);
2400
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2401
+ display:var(--tds-radio-group-description-invalid-icon-display);
2409
2402
  flex-shrink:0;
2410
- margin-block-start:calc(.5lh - .5em);
2411
- line-height:1.35;
2403
+ margin-top:calc(.5lh - .5em);
2404
+ line-height:var(--tds-radio-group-description-line-height);
2412
2405
  }
2413
2406
 
2407
+ .tds-radio-group--sm{
2408
+ --tds-radio-group-line-height:1.35;
2409
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2410
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2411
+ --tds-radio-group-description-line-height:1.3;
2412
+ }
2413
+
2414
2414
  @layer t-critical, t-component;
2415
2415
 
2416
2416
  :root{
@@ -3929,69 +3929,235 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3929
3929
  [data-flex-gap-xl="6"]{ gap:var(--t-spacing-6); }
3930
3930
  [data-flex-gap-xl="7"]{ gap:var(--t-spacing-7); }
3931
3931
 
3932
- [data-flex-row-gap-xl="0"]{ row-gap:0; }
3933
- [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
3934
- [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
3935
- [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
3936
- [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
3937
- [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
3938
- [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
3939
- [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
3940
- [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
3941
- [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
3942
- [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
3932
+ [data-flex-row-gap-xl="0"]{ row-gap:0; }
3933
+ [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
3934
+ [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
3935
+ [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
3936
+ [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
3937
+ [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
3938
+ [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
3939
+ [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
3940
+ [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
3941
+ [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
3942
+ [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
3943
+
3944
+ [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
3945
+ [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
3946
+ [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
3947
+ [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
3948
+ [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
3949
+ [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
3950
+ [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
3951
+ [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
3952
+ [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
3953
+ [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
3954
+ [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
3955
+
3956
+ [data-flex-basis-xl="auto"]{ flex-basis:auto; }
3957
+ [data-flex-basis-xl="0"]{ flex-basis:0; }
3958
+ [data-flex-basis-xl="100%"]{ flex-basis:100%; }
3959
+
3960
+ [data-padding-xl="0"]{ padding:0; }
3961
+ [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
3962
+ [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
3963
+ [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
3964
+ [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
3965
+ [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
3966
+ [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
3967
+ [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
3968
+ [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
3969
+ [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
3970
+ [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
3971
+
3972
+ [data-padding-block-xl="0"]{ padding-block:0; }
3973
+ [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
3974
+ [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
3975
+ [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
3976
+ [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
3977
+ [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
3978
+ [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
3979
+ [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
3980
+ [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
3981
+ [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
3982
+ [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
3983
+
3984
+ [data-padding-inline-xl="0"]{ padding-inline:0; }
3985
+ [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3986
+ [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
3987
+ [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
3988
+ [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3989
+ [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
3990
+ [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
3991
+ [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
3992
+ [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
3993
+ [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
3994
+ [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
3995
+ }
3996
+
3997
+ .tds-popover{
3998
+ max-inline-size:24rem;
3999
+ overflow:auto;
4000
+ overscroll-behavior:none;
4001
+ outline:0;
4002
+ scrollbar-color:#0004 var(--t-surface-color-card);
4003
+ scrollbar-width:thin;
4004
+ background:var(--t-surface-color-card);
4005
+ background-clip:padding-box;
4006
+ border:1px solid var(--t-border-color);
4007
+ border-radius:var(--t-border-radius);
4008
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4009
+ }
4010
+
4011
+ @media (prefers-reduced-motion: no-preference){
4012
+ .tds-popover[data-entering]{
4013
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
4014
+ }
4015
+
4016
+ .tds-popover[data-exiting]{
4017
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
4018
+ }
4019
+
4020
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
4021
+ will-change:opacity, transform;
4022
+ }
4023
+
4024
+ @keyframes tds-popover{
4025
+ from{
4026
+ opacity:0;
4027
+ transform:translateY(-8px);
4028
+ }
4029
+ }
4030
+ }
4031
+
4032
+ .tds-popover-content{
4033
+ display:flex;
4034
+ flex-direction:column;
4035
+ padding:var(--t-spacing-1);
4036
+ outline:0;
4037
+ }
4038
+
4039
+ .tds-segmented-control{
4040
+ --tds-segmented-control-font-size:var(--t-font-size-md);
4041
+ --tds-segmented-control-padding:var(--t-spacing-half);
4042
+ --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4043
+ --tds-segmented-control-icon-size:.66666667lh;
4044
+ --tds-segmented-control-border-radius:var(--t-border-radius-md);
4045
+ --tds-segmented-control-max-width:280px;
4046
+ --tds-segmented-control-min-height:var(--t-container-size-md);
4047
+ --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4048
+ --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4049
+ --tds-segmented-control-width:fit-content;
4050
+
4051
+ display:flex;
4052
+ flex-direction:column;
4053
+ gap:var(--t-spacing-half);
4054
+ align-items:flex-start;
4055
+ width:var(--tds-segmented-control-width);
4056
+ }
4057
+
4058
+ .tds-segmented-control--sm{
4059
+ --tds-segmented-control-font-size:var(--t-font-size-sm);
4060
+ --tds-segmented-control-padding-inline:7px;
4061
+ --tds-segmented-control-min-height:var(--t-container-size-sm);
4062
+ }
4063
+
4064
+ .tds-segmented-control--full-width{
4065
+ --tds-segmented-control-width:100%;
4066
+ --tds-segmented-control-max-width:none;
4067
+ }
4068
+
4069
+ .tds-segmented-control--full-width .tds-segmented-control-segment{
4070
+ flex:1 1 0;
4071
+ }
4072
+
4073
+ .tds-segmented-control-label{
4074
+ font-size:var(--tds-segmented-control-font-size);
4075
+ font-weight:var(--t-font-weight-normal);
4076
+ color:var(--t-text-color-headline);
4077
+ }
4078
+
4079
+ .tds-segmented-control-label--hidden{
4080
+ position:absolute;
4081
+ width:1px;
4082
+ height:1px;
4083
+ overflow:hidden;
4084
+ white-space:nowrap;
4085
+ clip-path:inset(50%);
4086
+ }
4087
+
4088
+ .tds-segmented-control-track{
4089
+ display:inline-flex;
4090
+ gap:var(--tds-segmented-control-track-gap);
4091
+ width:var(--tds-segmented-control-width);
4092
+ padding:var(--tds-segmented-control-padding);
4093
+ background-color:var(--t-form-background-color);
4094
+ border:1px solid var(--t-border-color);
4095
+ border-radius:var(--tds-segmented-control-border-radius);
4096
+ }
4097
+
4098
+ .tds-segmented-control-segment{
4099
+ --tds-segmented-control-color:var(--t-text-color-status-neutral);
4100
+ --tds-segmented-control-background-color:transparent;
4101
+
4102
+ display:inline-flex;
4103
+ gap:var(--t-spacing-1);
4104
+ align-items:center;
4105
+ justify-content:center;
4106
+ max-width:var(--tds-segmented-control-max-width);
4107
+ min-height:var(--tds-segmented-control-min-height);
4108
+ padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4109
+ padding-inline:var(--tds-segmented-control-padding-inline);
4110
+ font:inherit;
4111
+ font-size:var(--tds-segmented-control-font-size);
4112
+ color:var(--tds-segmented-control-color);
4113
+ text-align:center;
4114
+ cursor:pointer;
4115
+ -webkit-user-select:none;
4116
+ -moz-user-select:none;
4117
+ user-select:none;
4118
+ background-color:var(--tds-segmented-control-background-color);
4119
+ border:0;
4120
+ border-radius:var(--t-border-radius-sm);
4121
+ transition-timing-function:var(--t-ease-in-out);
4122
+ transition-duration:var(--t-duration-200);
4123
+ transition-property:color, background-color;
4124
+ }
4125
+
4126
+ .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4127
+ padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4128
+ }
3943
4129
 
3944
- [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
3945
- [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
3946
- [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
3947
- [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
3948
- [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
3949
- [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
3950
- [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
3951
- [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
3952
- [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
3953
- [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
3954
- [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4130
+ .tds-segmented-control-segment .symbol{
4131
+ display:block;
4132
+ flex-shrink:0;
4133
+ width:var(--tds-segmented-control-icon-size);
4134
+ height:var(--tds-segmented-control-icon-size);
4135
+ }
3955
4136
 
3956
- [data-flex-basis-xl="auto"]{ flex-basis:auto; }
3957
- [data-flex-basis-xl="0"]{ flex-basis:0; }
3958
- [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4137
+ .tds-segmented-control-segment:focus-visible{
4138
+ outline:var(--t-focus-ring-outline);
4139
+ outline-offset:var(--t-focus-ring-offset);
4140
+ }
3959
4141
 
3960
- [data-padding-xl="0"]{ padding:0; }
3961
- [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
3962
- [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
3963
- [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
3964
- [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
3965
- [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
3966
- [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
3967
- [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
3968
- [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
3969
- [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
3970
- [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4142
+ .tds-segmented-control-segment[aria-checked="true"]{
4143
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4144
+ --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
3971
4145
 
3972
- [data-padding-block-xl="0"]{ padding-block:0; }
3973
- [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
3974
- [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
3975
- [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
3976
- [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
3977
- [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
3978
- [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
3979
- [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
3980
- [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
3981
- [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
3982
- [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4146
+ cursor:default;
4147
+ }
3983
4148
 
3984
- [data-padding-inline-xl="0"]{ padding-inline:0; }
3985
- [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3986
- [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
3987
- [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
3988
- [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3989
- [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
3990
- [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
3991
- [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
3992
- [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
3993
- [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
3994
- [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4149
+ .tds-segmented-control-segment:disabled{
4150
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4151
+ --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
4152
+
4153
+ pointer-events:none;
4154
+ }
4155
+
4156
+ .tds-segmented-control-segment--interaction-subtle{
4157
+ --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4158
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4159
+ --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4160
+ --tds-segmented-control-background-color-disabled:transparent;
3995
4161
  }
3996
4162
 
3997
4163
  .tds-data-table{
@@ -4415,172 +4581,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4415
4581
  max-block-size:inherit;
4416
4582
  }
4417
4583
 
4418
- .tds-segmented-control{
4419
- --tds-segmented-control-font-size:var(--t-font-size-md);
4420
- --tds-segmented-control-padding:var(--t-spacing-half);
4421
- --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4422
- --tds-segmented-control-icon-size:.66666667lh;
4423
- --tds-segmented-control-border-radius:var(--t-border-radius-md);
4424
- --tds-segmented-control-max-width:280px;
4425
- --tds-segmented-control-min-height:var(--t-container-size-md);
4426
- --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4427
- --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4428
- --tds-segmented-control-width:fit-content;
4429
-
4430
- display:flex;
4431
- flex-direction:column;
4432
- gap:var(--t-spacing-half);
4433
- align-items:flex-start;
4434
- width:var(--tds-segmented-control-width);
4435
- }
4436
-
4437
- .tds-segmented-control--sm{
4438
- --tds-segmented-control-font-size:var(--t-font-size-sm);
4439
- --tds-segmented-control-padding-inline:7px;
4440
- --tds-segmented-control-min-height:var(--t-container-size-sm);
4441
- }
4442
-
4443
- .tds-segmented-control--full-width{
4444
- --tds-segmented-control-width:100%;
4445
- --tds-segmented-control-max-width:none;
4446
- }
4447
-
4448
- .tds-segmented-control--full-width .tds-segmented-control-segment{
4449
- flex:1 1 0;
4450
- }
4451
-
4452
- .tds-segmented-control-label{
4453
- font-size:var(--tds-segmented-control-font-size);
4454
- font-weight:var(--t-font-weight-normal);
4455
- color:var(--t-text-color-headline);
4456
- }
4457
-
4458
- .tds-segmented-control-label--hidden{
4459
- position:absolute;
4460
- width:1px;
4461
- height:1px;
4462
- overflow:hidden;
4463
- white-space:nowrap;
4464
- clip-path:inset(50%);
4465
- }
4466
-
4467
- .tds-segmented-control-track{
4468
- display:inline-flex;
4469
- gap:var(--tds-segmented-control-track-gap);
4470
- width:var(--tds-segmented-control-width);
4471
- padding:var(--tds-segmented-control-padding);
4472
- background-color:var(--t-form-background-color);
4473
- border:1px solid var(--t-border-color);
4474
- border-radius:var(--tds-segmented-control-border-radius);
4475
- }
4476
-
4477
- .tds-segmented-control-segment{
4478
- --tds-segmented-control-color:var(--t-text-color-status-neutral);
4479
- --tds-segmented-control-background-color:transparent;
4480
-
4481
- display:inline-flex;
4482
- gap:var(--t-spacing-1);
4483
- align-items:center;
4484
- justify-content:center;
4485
- max-width:var(--tds-segmented-control-max-width);
4486
- min-height:var(--tds-segmented-control-min-height);
4487
- padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4488
- padding-inline:var(--tds-segmented-control-padding-inline);
4489
- font:inherit;
4490
- font-size:var(--tds-segmented-control-font-size);
4491
- color:var(--tds-segmented-control-color);
4492
- text-align:center;
4493
- cursor:pointer;
4494
- -webkit-user-select:none;
4495
- -moz-user-select:none;
4496
- user-select:none;
4497
- background-color:var(--tds-segmented-control-background-color);
4498
- border:0;
4499
- border-radius:var(--t-border-radius-sm);
4500
- transition-timing-function:var(--t-ease-in-out);
4501
- transition-duration:var(--t-duration-200);
4502
- transition-property:color, background-color;
4503
- }
4504
-
4505
- .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4506
- padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4507
- }
4508
-
4509
- .tds-segmented-control-segment .symbol{
4510
- display:block;
4511
- flex-shrink:0;
4512
- width:var(--tds-segmented-control-icon-size);
4513
- height:var(--tds-segmented-control-icon-size);
4514
- }
4515
-
4516
- .tds-segmented-control-segment:focus-visible{
4517
- outline:var(--t-focus-ring-outline);
4518
- outline-offset:var(--t-focus-ring-offset);
4519
- }
4520
-
4521
- .tds-segmented-control-segment[aria-checked="true"]{
4522
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4523
- --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
4524
-
4525
- cursor:default;
4526
- }
4527
-
4528
- .tds-segmented-control-segment:disabled{
4529
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4530
- --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
4531
-
4532
- pointer-events:none;
4533
- }
4534
-
4535
- .tds-segmented-control-segment--interaction-subtle{
4536
- --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4537
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4538
- --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4539
- --tds-segmented-control-background-color-disabled:transparent;
4540
- }
4541
-
4542
- .tds-popover{
4543
- max-inline-size:24rem;
4544
- overflow:auto;
4545
- overscroll-behavior:none;
4546
- outline:0;
4547
- scrollbar-color:#0004 var(--t-surface-color-card);
4548
- scrollbar-width:thin;
4549
- background:var(--t-surface-color-card);
4550
- background-clip:padding-box;
4551
- border:1px solid var(--t-border-color);
4552
- border-radius:var(--t-border-radius);
4553
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4554
- }
4555
-
4556
- @media (prefers-reduced-motion: no-preference){
4557
- .tds-popover[data-entering]{
4558
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
4559
- }
4560
-
4561
- .tds-popover[data-exiting]{
4562
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
4563
- }
4564
-
4565
- .tds-popover[data-entering],.tds-popover[data-exiting]{
4566
- will-change:opacity, transform;
4567
- }
4568
-
4569
- @keyframes tds-popover{
4570
- from{
4571
- opacity:0;
4572
- transform:translateY(-8px);
4573
- }
4574
- }
4575
- }
4576
-
4577
- .tds-popover-content{
4578
- display:flex;
4579
- flex-direction:column;
4580
- padding:var(--t-spacing-1);
4581
- outline:0;
4582
- }
4583
-
4584
4584
  .tds-pagination{
4585
4585
  --tds-pagination-background-color:var(--t-surface-color-canvas);
4586
4586
  --tds-pagination-page-background-color-hover:var(--t-fill-color-neutral-100);