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

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