@planningcenter/tapestry 3.8.1-rc.0 → 3.8.1-rc.1

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