@planningcenter/tapestry 4.0.0-rc.2 → 4.0.0-rc.4

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