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

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