@planningcenter/tapestry 4.3.0-rc.3 → 4.3.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +1184 -1184
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1184 -1184
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -719,1560 +719,1560 @@
719
719
  border-end-end-radius:var(--tds-btn-border-radius);
720
720
  }
721
721
 
722
+ .tds-checkbox{
723
+ --tds-checkbox-font-size:var(--t-font-size-md);
724
+ --tds-checkbox-cursor:pointer;
725
+ --tds-checkbox-line-height:1.4;
726
+ --tds-checkbox-transition-property:background-color, border-color;
722
727
 
723
- @media (prefers-reduced-motion: no-preference){
724
-
725
- :root{
726
- interpolate-size:allow-keywords;
727
- }
728
- }
729
-
730
- @layer tds-component{
731
- tds-sidenav,
732
- .tds-sidenav{
733
- --tds-sidenav-indent:12px;
734
- --tds-sidenav-item-depth:0;
735
-
736
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
737
-
738
- --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;
739
- --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;
740
- --tds-sidenav-collapse-closed-opacity:0;
741
- --tds-sidenav-collapse-open-opacity:1;
742
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
743
- --tds-sidenav-collapse-open-transform:translateY(0);
744
-
745
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
746
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
747
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
748
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
749
-
750
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
751
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
752
- --tds-sidenav-item-nested-background-selected:transparent;
753
-
754
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
755
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
756
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
757
-
758
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
759
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
760
- }
761
-
762
- @media (prefers-reduced-motion: reduce){
763
- tds-sidenav,
764
- .tds-sidenav{
765
- --tds-sidenav-collapse-transition-enter:none;
766
- --tds-sidenav-collapse-transition-exit:none;
767
- --tds-sidenav-collapse-closed-transform:none;
768
- --tds-sidenav-collapse-open-transform:none;
769
- }
770
- }
771
-
772
- .tds-sidenav--theme-gray{
773
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
774
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
775
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
776
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
777
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
778
- }
779
- }
728
+ --tds-checkbox-input-size:var(--t-element-size-md);
729
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
730
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
731
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
780
732
 
781
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
782
- display:flex;
783
- }
733
+ --tds-checkbox-input-icon:none;
734
+ --tds-checkbox-input-icon-visibility:hidden;
735
+ --tds-checkbox-input-icon-opacity:0;
736
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
784
737
 
785
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
786
- flex-direction:column;
787
- gap:var(--t-spacing-half);
788
- width:100%;
789
- }
738
+ --tds-checkbox-label-color:var(--t-form-color);
790
739
 
791
- .tds-sidenav-section-list{
792
- width:100%;
793
- padding:0;
794
- margin:0;
795
- list-style:none;
796
- }
740
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
741
+ --tds-checkbox-description-line-height:1.35;
742
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
743
+ --tds-checkbox-description-invalid-icon-display:none;
797
744
 
798
- .tds-sidenav-section-header{
799
- display:flex;
800
- align-items:baseline;
801
- justify-content:space-between;
802
- padding-top:var(--t-spacing-2);
745
+ position:relative;
746
+ display:inline-grid;
747
+ grid-template-columns:auto;
748
+ grid-auto-columns:1fr;
749
+ gap:var(--t-spacing-fourth) 0;
750
+ line-height:var(--tds-checkbox-line-height);
751
+ -webkit-user-select:none;
752
+ -moz-user-select:none;
753
+ user-select:none;
803
754
  }
804
755
 
805
- .tds-sidenav-section-header h2{
806
- margin:0;
807
- font-size:var(--t-font-size-sm);
808
- font-weight:var(--t-font-weight-semibold);
809
- line-height:1.35;
810
- color:var(--t-text-color-secondary);
811
- text-transform:uppercase;
812
- }
813
-
814
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
815
- padding-top:0;
756
+ .tds-checkbox label{
757
+ grid-area:1 / 2;
758
+ padding-inline-start:var(--t-spacing-1);
759
+ font-size:var(--tds-checkbox-font-size);
760
+ font-weight:var(--t-font-weight-normal);
761
+ color:var(--tds-checkbox-label-color);
762
+ cursor:var(--tds-checkbox-cursor);
816
763
  }
817
764
 
818
- .tds-sidenav-section-header [slot="label-actions"]{
765
+ .tds-checkbox tds-indeterminate{
819
766
  display:flex;
820
- gap:var(--t-spacing-half);
821
- align-items:center;
822
767
  }
823
768
 
824
- .tds-sidenav-section [slot="section-actions"]{
825
- display:flex;
826
- gap:12px;
827
- align-items:center;
828
- min-height:42px;
829
- padding:var(--t-spacing-1) 0;
830
- }
831
-
832
- .tds-sidenav-section-list,
833
- .tds-sidenav-item{
834
- width:100%;
835
- padding:0;
836
- margin:0;
837
- }
838
-
839
- .tds-sidenav-item :is(a,button){
769
+ .tds-checkbox input[type="checkbox"]{
840
770
  position:relative;
841
- display:flex;
842
- gap:12px;
843
- align-items:center;
844
- width:100%;
845
- padding:12px;
846
- overflow:hidden;
847
- font-size:var(--t-font-size-sm);
848
- line-height:18px;
849
- color:var(--t-text-color-headline);
850
- white-space:nowrap;
851
- text-decoration:none;
771
+ width:1em;
772
+ height:1em;
773
+ margin:calc((1lh - 1em) / 2) 0 0;
774
+ font-size:var(--tds-checkbox-font-size);
775
+ line-height:inherit;
852
776
  -webkit-appearance:none;
853
777
  -moz-appearance:none;
854
778
  appearance:none;
855
- cursor:pointer;
856
- background-color:var(--tds-sidenav-item-background, transparent);
857
- border:0;
858
- border-radius:var(--t-border-radius);
859
- transition:var(--tds-sidenav-item-transition);
779
+ cursor:var(--tds-checkbox-cursor);
780
+ background-color:var(--tds-checkbox-input-background-color);
781
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
782
+ border-radius:var(--tds-checkbox-input-border-radius);
783
+ transition-timing-function:var(--t-ease-in-out);
784
+ transition-duration:var(--t-duration-200);
785
+ transition-property:var(--tds-checkbox-transition-property);
860
786
  }
861
787
 
862
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
863
- display:block;
864
- flex:1;
865
- overflow:hidden;
866
- text-overflow:ellipsis;
867
- text-align:left;
868
- white-space:nowrap;
788
+ :is(.tds-checkbox input[type="checkbox"])::before{
789
+ position:absolute;
790
+ top:50%;
791
+ left:50%;
792
+ visibility:var(--tds-checkbox-input-icon-visibility);
793
+ width:100%;
794
+ height:100%;
795
+ content:"";
796
+ background-color:var(--tds-checkbox-input-icon-fill);
797
+ border-radius:var(--tds-checkbox-input-border-radius);
798
+ opacity:var(--tds-checkbox-input-icon-opacity);
799
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
800
+ mask-image:var(--tds-checkbox-input-icon);
801
+ -webkit-mask-repeat:no-repeat;
802
+ mask-repeat:no-repeat;
803
+ -webkit-mask-size:contain;
804
+ mask-size:contain;
805
+ transform:translate(-50%, -50%);
869
806
  }
870
807
 
871
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
872
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
873
- color:var(--t-text-color-headline);
874
- text-decoration:none;
808
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
809
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
810
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
875
811
  }
876
812
 
877
- :is(.tds-sidenav-item :is(a,button)):active{
878
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
813
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
814
+ outline:var(--t-focus-ring-outline);
815
+ outline-offset:var(--t-focus-ring-offset);
879
816
  }
880
817
 
881
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
882
- overflow:hidden;
883
- color:var(--tds-sidenav-item-icon-color);
818
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
819
+ pointer-events:none;
884
820
  }
885
821
 
886
- :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{
887
- display:block;
888
- width:var(--tds-sidenav-item-icon-size);
889
- height:var(--tds-sidenav-item-icon-size);
890
- }
822
+ @media (prefers-reduced-motion: reduce){
891
823
 
892
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
893
- --tds-sidenav-indent:19px;
824
+ .tds-checkbox input[type="checkbox"]{
825
+ --tds-checkbox-transition-property:none;
826
+ }
894
827
  }
895
828
 
896
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
897
- visibility:visible;
898
- block-size:auto;
899
- opacity:1;
829
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
830
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
831
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
832
+ --tds-checkbox-input-icon-visibility:visible;
833
+ --tds-checkbox-input-icon-opacity:1;
834
+ }
835
+
836
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
837
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
838
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
900
839
  }
901
840
 
902
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
903
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
904
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
841
+ .tds-checkbox:has(input:checked){
842
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
843
+ }
905
844
 
906
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
907
- font-weight:var(--t-font-weight-semibold);
845
+ .tds-checkbox:has(input:indeterminate){
846
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
908
847
  }
909
848
 
910
- .tds-sidenav-item:has(.tds-sidenav-section){
911
- display:flex;
912
- flex-direction:column;
913
- gap:var(--t-spacing-half);
849
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
850
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
851
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
852
+ --tds-checkbox-description-invalid-icon-display:inline-block;
914
853
  }
915
854
 
916
- .tds-sidenav-item .tds-sidenav-section-list{
917
- --tds-sidenav-item-depth:1;
918
- gap:0;
919
- }
920
-
921
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
922
- visibility:hidden;
923
- block-size:0;
924
- overflow-y:clip;
925
- opacity:0;
926
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
927
- }
928
-
929
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
930
- --tds-sidenav-item-depth:2;
855
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
856
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
857
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
931
858
  }
932
859
 
933
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
934
- min-height:var(--t-element-size-2xl);
935
- padding-block:9px;
936
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
937
- line-height:1;
938
- background-color:transparent;
860
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
861
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
862
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
939
863
  }
940
864
 
941
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
942
- position:absolute;
943
- top:0;
944
- bottom:0;
945
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
946
- width:2px;
947
- content:"";
948
- background-color:var(--tds-sidenav-item-nested-border-color);
949
- transition:var(--tds-sidenav-item-transition);
950
- }
951
-
952
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
953
- position:absolute;
954
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
955
- z-index:-1;
956
- height:100%;
957
- content:"";
958
- background-color:var(--tds-sidenav-item-nested-background);
959
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
960
- transition:var(--tds-sidenav-item-transition);
865
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
866
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
867
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
961
868
  }
962
869
 
963
- :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)){
964
- display:block;
965
- text-align:left;
966
- white-space:normal;
967
- }
870
+ .tds-checkbox:has(input:required) label::after{
871
+ margin-left:.25ch;
872
+ color:var(--t-text-color-status-error);
873
+ content:"*";
874
+ }
968
875
 
969
- :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{
970
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
971
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
972
- }
876
+ .tds-checkbox:has(input:disabled){
877
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
878
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
973
879
 
974
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
975
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
976
- }
880
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
881
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
882
+ --tds-checkbox-cursor:not-allowed;
883
+ }
977
884
 
978
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
979
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
980
- font-weight:var(--t-font-weight-medium);
885
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
886
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
981
887
  }
982
888
 
983
- .tds-sidenav-responsive-header{
889
+ .tds-checkbox-description{
984
890
  display:flex;
985
- gap:var(--t-spacing-2);
986
- align-items:center;
987
- width:100%;
891
+ grid-area:2 / 2;
892
+ gap:var(--t-spacing-half);
893
+ align-items:flex-start;
894
+ padding-inline-start:var(--t-spacing-1);
895
+ margin:0;
896
+ font-size:var(--tds-checkbox-description-font-size);
897
+ line-height:var(--tds-checkbox-description-line-height);
898
+ color:var(--tds-checkbox-description-color);
899
+ cursor:text;
988
900
  }
989
901
 
990
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
991
- order:0;
902
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
903
+ display:var(--tds-checkbox-description-invalid-icon-display);
904
+ flex-shrink:0;
905
+ margin-top:calc(.5lh - .5em);
906
+ line-height:var(--tds-checkbox-description-line-height);
992
907
  }
993
908
 
994
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
995
- flex:1;
996
- order:1;
997
- margin:0;
998
- font-size:var(--t-font-size-lg);
999
- font-weight:var(--t-font-weight-medium);
1000
- color:var(--t-text-color-headline);
1001
- }
909
+ .tds-checkbox--sm{
910
+ --tds-checkbox-line-height:1.35;
911
+ --tds-checkbox-input-size:var(--t-element-size-sm);
912
+ --tds-checkbox-font-size:var(--t-font-size-sm);
913
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
914
+ --tds-checkbox-description-line-height:1.3;
915
+ }
1002
916
 
1003
- @media (max-width: 719px){
1004
- .tds-sidenav-collapse{
1005
- z-index:10001;
1006
- display:none;
1007
- max-width:min(448px, calc(100vw - 48px));
917
+ .tds-checkbox-group{
918
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
919
+ --tds-checkbox-group-line-height:1.4;
920
+ --tds-checkbox-group-gap:var(--t-spacing-1);
921
+
922
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
923
+ --tds-checkbox-group-description-line-height:1.35;
924
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
925
+ --tds-checkbox-group-description-invalid-icon-display:none;
926
+ display:flex;
927
+ flex-direction:column;
928
+ gap:0;
929
+ padding:0;
930
+ margin:0;
931
+
932
+ font-size:var(--tds-checkbox-group-font-size);
933
+ line-height:var(--tds-checkbox-group-line-height);
934
+ border:0;
935
+ }
936
+
937
+ .tds-checkbox-group legend{
938
+ float:left;
1008
939
  padding:0;
1009
- margin:12px 0;
1010
- position-area:bottom span-right;
1011
- overflow:hidden;
1012
- outline:0;
1013
- background:var(--t-surface-color-card);
1014
- border:0;
1015
- border-radius:6px;
1016
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1017
- opacity:var(--tds-sidenav-collapse-open-opacity);
1018
- transform:var(--tds-sidenav-collapse-open-transform);
1019
- transition:var(--tds-sidenav-collapse-transition-enter);
1020
- will-change:transform;
940
+ margin:0;
1021
941
  }
1022
942
 
1023
- .tds-sidenav-scroll-container{
1024
- --webkit-overflow-scrolling:touch;
1025
- display:block;
1026
- width:100%;
1027
- height:-moz-fit-content;
1028
- height:fit-content;
1029
- padding:var(--t-spacing-2);
1030
- overflow-y:auto;
943
+ .tds-checkbox-group[aria-invalid="true"]{
944
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
945
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1031
946
  }
1032
947
 
1033
- .tds-sidenav-item :is(a, button) :is(.prefix){
1034
- display:none;
1035
- }
1036
- @supports selector(:popover-open){
1037
- .tds-sidenav-collapse:popover-open{
1038
- display:flex;
948
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
949
+ margin-left:.25ch;
950
+ color:var(--t-text-color-status-error);
951
+ content:"*";
1039
952
  }
1040
953
 
1041
- .tds-sidenav-collapse:not(:popover-open){
1042
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1043
- transition:var(--tds-sidenav-collapse-transition-exit);
954
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
955
+ content:none;
1044
956
  }
1045
957
 
1046
- @starting-style{
1047
- .tds-sidenav-collapse:popover-open{
1048
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1049
- transform:var(--tds-sidenav-collapse-closed-transform);
1050
- }
1051
- }
1052
- }
1053
- @supports not selector(:popover-open){
1054
- .tds-sidenav-collapse.\:popover-open{
1055
- display:flex;
1056
- }
958
+ .tds-checkbox-group-fields{
959
+ display:flex;
960
+ flex-direction:column;
961
+ gap:var(--tds-checkbox-group-gap);
962
+ align-items:flex-start;
963
+ margin-top:var(--t-spacing-1);
964
+ }
1057
965
 
1058
- .tds-sidenav-collapse:not(.\:popover-open){
1059
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1060
- transition:var(--tds-sidenav-collapse-transition-exit);
1061
- }
1062
- }
966
+ .tds-checkbox-group-description{
967
+ display:flex;
968
+ gap:var(--t-spacing-half);
969
+ align-items:flex-start;
970
+ margin:var(--t-spacing-fourth) 0 0;
971
+ font-size:var(--tds-checkbox-group-description-font-size);
972
+ line-height:var(--tds-checkbox-group-description-line-height);
973
+ color:var(--tds-checkbox-group-description-color);
974
+ cursor:text;
1063
975
  }
1064
976
 
1065
- @media (min-width: 720px){
1066
- .tds-sidenav-responsive-header{
1067
- display:none;
977
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
978
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
979
+ flex-shrink:0;
980
+ margin-top:calc(.5lh - .5em);
981
+ line-height:var(--tds-checkbox-group-description-line-height);
1068
982
  }
983
+
984
+ .tds-checkbox-group--sm{
985
+ --tds-checkbox-group-line-height:1.35;
986
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
987
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
988
+ --tds-checkbox-group-description-line-height:1.3;
1069
989
  }
1070
990
 
1071
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1072
- display:none;
1073
- }
1074
991
 
1075
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1076
- display:block;
992
+ :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{
993
+ -webkit-appearance:none;
994
+ appearance:none;
1077
995
  }
1078
996
 
1079
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1080
- display:flex;
1081
- flex-direction:column;
997
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
998
+ inline-size:1em;
999
+ block-size:2em;
1082
1000
  }
1001
+ @supports (field-sizing: content){
1002
+ .tds-input--auto-width{
1003
+ inline-size:-moz-fit-content;
1004
+ inline-size:fit-content;
1005
+ min-inline-size:min(100%, 122px);
1006
+ }
1083
1007
 
1084
- @layer t-critical{
1085
- tds-page-header:not(.hydrated){
1086
- display:none;
1008
+ .tds-input--auto-width input{
1009
+ field-sizing:content;
1010
+ inline-size:auto;
1087
1011
  }
1088
1012
  }
1089
1013
 
1090
- @layer t-component{
1091
- .tds-page-header{
1092
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1093
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1094
- --tds-page-header-color:var(--t-text-color);
1095
- --tds-page-header-bottom-border-color:transparent;
1096
- --tds-page-header-headline-color:var(--t-text-color-headline);
1097
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1098
- --tds-page-header-padding-x:var(--t-spacing-2);
1099
- --tds-page-header-padding-y:var(--t-spacing-2);
1100
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1101
- --tds-page-header-nav-gap:var(--t-spacing-1);
1102
- --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%);
1103
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1104
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1105
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1106
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1107
- --tds-page-header-nav-item-border-width:1px;
1108
-
1109
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1110
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1111
-
1112
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1113
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1114
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1115
-
1116
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1117
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1118
-
1119
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1120
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1121
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1014
+ .tds-modal-overlay{
1015
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1122
1016
 
1123
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1124
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1125
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1126
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1127
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1128
- }
1017
+ position:fixed;
1018
+ inset:0;
1019
+ z-index:1000;
1020
+ display:grid;
1021
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1022
+ justify-items:center;
1023
+ overflow-y:auto;
1024
+ background:hsl(0 0% 0% / 40%);
1025
+ }
1129
1026
 
1130
- .tds-page-header--profile{
1131
- --tds-page-header-padding-y:20px;
1027
+ .tds-modal-overlay[data-entering]{
1028
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1132
1029
  }
1133
1030
 
1134
- @supports (color: light-dark(#fff, #000)){
1135
- .tds-page-header{
1136
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1137
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1138
- }
1031
+ .tds-modal-overlay[data-exiting]{
1032
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1139
1033
  }
1140
1034
 
1141
- @media (min-width: 600px){
1142
- .tds-page-header{
1143
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1144
- --tds-page-header-color:var(--t-text-color-secondary);
1145
- --tds-page-header-bottom-border-color:var(--t-border-color);
1146
- --tds-page-header-padding-x:var(--t-spacing-3);
1147
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1148
- --tds-page-header-nav-gap:var(--t-spacing-half);
1149
- --tds-page-header-nav-background:transparent;
1150
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1151
- --tds-page-header-nav-item-border-width:1px;
1152
- --tds-page-header-nav-item-color:var(--t-text-color);
1153
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1154
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1155
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1156
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1157
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1158
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1159
- }
1035
+ @keyframes tds-modal-overlay-fade{
1036
+ from{
1037
+ opacity:0;
1160
1038
  }
1161
1039
  }
1162
1040
 
1163
- .tds-page-header{
1041
+ .tds-modal-frame{
1042
+ --tds-modal-width:600px;
1043
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1164
1044
  display:flex;
1165
- flex-direction:column;
1166
- padding-top:var(--tds-page-header-padding-y);
1167
- color:var(--tds-page-header-color);
1168
- background:var(--tds-page-header-background-color);
1169
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1170
- }
1171
-
1172
- .tds-page-header:not(.has-nav){
1173
- padding-bottom:var(--tds-page-header-padding-y);
1174
- }
1175
1045
 
1176
- .tds-page-header.inactive{
1177
- background:var(--tds-page-header-background-color-inactive);
1178
- }
1046
+ grid-row:2;
1047
+ justify-content:center;
1048
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1049
+ }
1179
1050
 
1180
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1181
- width:100%;
1051
+ .tds-modal-frame[data-entering]{
1052
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1182
1053
  }
1183
1054
 
1184
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1185
- display:flex;
1186
- flex-flow:row wrap;
1187
- gap:var(--t-spacing-half) var(--t-spacing-1);
1188
- align-items:flex-start;
1189
- justify-content:flex-start;
1190
- min-width:0;
1055
+ .tds-modal-frame[data-exiting]{
1056
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1191
1057
  }
1192
1058
 
1193
- :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{
1194
- display:flex;
1195
- gap:var(--tds-page-header-nav-gap);
1196
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1197
- margin:0 0 -1px;
1198
- overflow:auto;
1199
- list-style:none;
1200
- background:var(--tds-page-header-nav-background);
1201
- }
1202
-
1203
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1204
- position:relative;
1205
- display:inline-flex;
1206
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1207
- font-size:var(--t-font-size-sm);
1208
- line-height:22px;
1209
- color:var(--tds-page-header-nav-item-color);
1210
- white-space:nowrap;
1211
- text-decoration:none;
1212
- -webkit-appearance:none;
1213
- -moz-appearance:none;
1214
- appearance:none;
1215
- cursor:pointer;
1216
- outline-offset:-2px;
1217
- background-color:var(--tds-page-header-nav-item-background-color);
1218
- background-clip:padding-box;
1219
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1220
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1221
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1222
- }
1223
-
1224
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1225
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1226
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1227
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1228
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1229
- }
1230
-
1231
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1232
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1233
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1234
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1235
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1236
- }
1237
-
1238
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1239
- background-color:var(--tds-page-header-nav-item-background-color-active);
1240
- border-color:var(--tds-page-header-nav-item-border-color-active);
1241
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1242
- }
1243
-
1244
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1245
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1246
- color:var(--tds-page-header-nav-item-color-disabled);
1247
- cursor:not-allowed;
1248
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1249
- opacity:1;
1250
- }
1251
-
1252
- @media (min-width: 600px){
1253
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1254
- position:absolute;
1255
- inset:auto -1px -1px;
1256
- height:1px;
1257
- pointer-events:none;
1258
- content:"";
1259
- background-color:var(--tds-page-header-bottom-border-color);
1260
- }
1261
- }
1059
+ .tds-modal-frame--sm{
1060
+ --tds-modal-width:400px;
1061
+ }
1262
1062
 
1263
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1264
- position:relative;
1265
- }
1063
+ .tds-modal-frame--lg{
1064
+ --tds-modal-width:800px;
1065
+ }
1266
1066
 
1267
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1268
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1269
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1270
- }
1067
+ .tds-modal-frame--xl{
1068
+ --tds-modal-width:1000px;
1069
+ }
1271
1070
 
1272
- :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{
1273
- position:absolute;
1274
- top:-5px;
1275
- right:-2px;
1276
- width:10px;
1277
- height:10px;
1278
- content:"";
1279
- background:var(--tds-page-header-nav-item-indicator-color);
1280
- border-radius:50%;
1281
- }
1071
+ @keyframes tds-modal-zoom{
1072
+ from{
1073
+ opacity:0;
1074
+ scale:.96;
1075
+ }
1076
+ }
1282
1077
 
1283
- @media (prefers-reduced-motion: no-preference){
1284
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1285
- animation:indicator-pulse 1.25s ease infinite;
1286
- }
1287
- }
1078
+ @media (prefers-reduced-motion: reduce){
1079
+ .tds-modal-overlay[data-entering],
1080
+ .tds-modal-overlay[data-exiting],
1081
+ .tds-modal-frame[data-entering],
1082
+ .tds-modal-frame[data-exiting]{
1083
+ animation:none;
1084
+ }
1085
+ }
1288
1086
 
1289
- .tds-page-header__title-bar{
1087
+ .tds-modal{
1290
1088
  display:flex;
1291
1089
  flex-direction:column;
1292
- gap:var(--t-spacing-2) var(--t-spacing-1);
1293
- align-items:flex-start;
1294
- justify-content:space-between;
1295
- padding:0 var(--tds-page-header-padding-x);
1090
+ width:100%;
1091
+ padding-block-start:var(--t-spacing-3);
1092
+ padding-inline:0;
1093
+ background:var(--t-surface-color-card);
1094
+
1095
+ border:0;
1096
+ border-radius:var(--t-border-radius-lg);
1097
+ box-shadow:0 4px 18px 0 #0003;
1296
1098
  }
1297
1099
 
1298
- .tds-page-header--profile > .tds-page-header__title-bar{
1299
- align-items:center;
1100
+ .tds-modal:focus{
1101
+ outline:none;
1300
1102
  }
1301
1103
 
1302
- .tds-page-header__primary{
1303
- width:100%;
1104
+ .tds-modal-header{
1105
+ display:grid;
1106
+ grid-template-columns:1fr auto;
1107
+ -moz-column-gap:var(--t-spacing-2);
1108
+ column-gap:var(--t-spacing-2);
1109
+ padding-block:0;
1110
+ padding-inline:var(--t-spacing-4);
1304
1111
  }
1305
1112
 
1306
- .tds-page-header__primary h1{
1307
- margin:0;
1308
- font-size:var(--tds-page-header-headline-font-size);
1309
- font-weight:var(--t-font-weight-normal);
1310
- line-height:32px;
1311
- color:var(--tds-page-header-headline-color);
1312
- overflow-wrap:break-word;
1313
- }
1113
+ .tds-modal-title{
1114
+ grid-row:1;
1115
+ grid-column:1;
1116
+ margin:0;
1117
+ font-size:var(--t-font-size-2xl);
1118
+ font-weight:var(--t-font-weight-medium);
1119
+ line-height:140%;
1120
+ color:var(--t-text-color-headline);
1121
+ }
1314
1122
 
1315
- @media (min-width: 960px){
1316
- .tds-page-header__primary{
1317
- flex:1 1 max-content;
1318
- width:auto;
1319
- min-width:0;
1320
- max-width:100%;
1321
- }
1123
+ .tds-modal-subtitle{
1124
+ grid-row:2;
1125
+ grid-column:1;
1126
+ margin:0;
1127
+ font-size:var(--t-font-size-md);
1128
+ font-weight:var(--t-font-weight-medium);
1129
+ line-height:140%;
1130
+ color:var(--t-text-color-secondary);
1131
+ }
1322
1132
 
1323
- .tds-page-header__title-bar,
1324
- .tds-page-header--profile .tds-page-header__title-bar{
1325
- flex-flow:row nowrap;
1326
- row-gap:12px;
1327
- align-items:flex-start;
1328
- }
1329
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1330
- width:auto;
1331
- }
1133
+ .tds-modal-close{
1134
+ grid-row:1;
1135
+ grid-column:2;
1136
+ align-self:center;
1137
+ color:var(--t-icon-color-dim);
1138
+ }
1332
1139
 
1333
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1334
- justify-content:flex-end;
1335
- }
1140
+ .tds-modal-body{
1141
+ padding-block:var(--t-spacing-3);
1142
+ padding-inline:var(--t-spacing-4);
1336
1143
  }
1337
1144
 
1338
- .tds-page-header-phone,
1339
- .tds-page-header-email{
1340
- color:var(--tds-page-header-color);
1341
- white-space:nowrap;
1145
+ .tds-modal-body--full-width{
1146
+ padding-inline:0;
1147
+ }
1148
+
1149
+ .tds-modal-footer{
1150
+ display:flex;
1151
+ gap:var(--t-spacing-2);
1152
+ align-items:center;
1153
+ justify-content:flex-end;
1154
+ padding-block:var(--t-spacing-3);
1155
+ padding-inline:var(--t-spacing-4);
1156
+ border-top:1px solid var(--t-border-color);
1342
1157
  }
1343
- .tds-page-header-email{
1344
- max-width:100%;
1345
- overflow:hidden;
1346
- text-overflow:ellipsis;
1158
+
1159
+ .tds-modal-footer > [slot="start"]{
1160
+ margin-inline-end:auto;
1347
1161
  }
1348
1162
 
1349
- @keyframes indicator-pulse{
1350
- 0%{
1351
- opacity:.3;
1352
- transform:scale(.9);
1163
+ @media (min-width: 720px){
1164
+ .tds-modal-overlay{
1165
+ --tds-modal-min-margin-block:0;
1353
1166
  }
1354
1167
 
1355
- 100%{
1356
- opacity:0;
1357
- transform:scale(1.75);
1168
+ .tds-modal-footer{
1169
+ position:sticky;
1170
+ bottom:0;
1171
+ background:var(--t-surface-color-card);
1172
+ border-end-start-radius:var(--t-border-radius-lg);
1173
+ border-end-end-radius:var(--t-border-radius-lg);
1358
1174
  }
1359
1175
  }
1360
1176
 
1361
- .tds-checkbox{
1362
- --tds-checkbox-font-size:var(--t-font-size-md);
1363
- --tds-checkbox-cursor:pointer;
1364
- --tds-checkbox-line-height:1.4;
1365
- --tds-checkbox-transition-property:background-color, border-color;
1366
-
1367
- --tds-checkbox-input-size:var(--t-element-size-md);
1368
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1369
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1370
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1177
+ .tds-radio{
1178
+ --tds-radio-font-size:var(--t-font-size-md);
1179
+ --tds-radio-cursor:pointer;
1180
+ --tds-radio-line-height:1.4;
1181
+ --tds-radio-transition-property:border-width;
1371
1182
 
1372
- --tds-checkbox-input-icon:none;
1373
- --tds-checkbox-input-icon-visibility:hidden;
1374
- --tds-checkbox-input-icon-opacity:0;
1375
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1183
+ --tds-radio-input-size:var(--t-element-size-md);
1184
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1185
+ --tds-radio-input-border-color:var(--t-form-border-color);
1186
+ --tds-radio-input-border-width:var(--t-form-border-width);
1187
+ --tds-radio-input-background-color:var(--t-form-background-color);
1376
1188
 
1377
- --tds-checkbox-label-color:var(--t-form-color);
1189
+ --tds-radio-label-color:var(--t-form-color);
1378
1190
 
1379
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1380
- --tds-checkbox-description-line-height:1.35;
1381
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1382
- --tds-checkbox-description-invalid-icon-display:none;
1191
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1192
+ --tds-radio-description-line-height:1.35;
1193
+ --tds-radio-description-color:var(--t-text-color-secondary);
1383
1194
 
1384
1195
  position:relative;
1385
1196
  display:inline-grid;
1386
1197
  grid-template-columns:auto;
1387
1198
  grid-auto-columns:1fr;
1388
1199
  gap:var(--t-spacing-fourth) 0;
1389
- line-height:var(--tds-checkbox-line-height);
1200
+ line-height:var(--tds-radio-line-height);
1390
1201
  -webkit-user-select:none;
1391
1202
  -moz-user-select:none;
1392
1203
  user-select:none;
1393
1204
  }
1394
1205
 
1395
- .tds-checkbox label{
1206
+ .tds-radio label{
1396
1207
  grid-area:1 / 2;
1397
1208
  padding-inline-start:var(--t-spacing-1);
1398
- font-size:var(--tds-checkbox-font-size);
1209
+ font-size:var(--tds-radio-font-size);
1399
1210
  font-weight:var(--t-font-weight-normal);
1400
- color:var(--tds-checkbox-label-color);
1401
- cursor:var(--tds-checkbox-cursor);
1402
- }
1403
-
1404
- .tds-checkbox tds-indeterminate{
1405
- display:flex;
1211
+ color:var(--tds-radio-label-color);
1212
+ cursor:var(--tds-radio-cursor);
1406
1213
  }
1407
1214
 
1408
- .tds-checkbox input[type="checkbox"]{
1215
+ .tds-radio input[type="radio"]{
1409
1216
  position:relative;
1410
1217
  width:1em;
1411
1218
  height:1em;
1412
1219
  margin:calc((1lh - 1em) / 2) 0 0;
1413
- font-size:var(--tds-checkbox-font-size);
1220
+ font-size:var(--tds-radio-font-size);
1414
1221
  line-height:inherit;
1415
1222
  -webkit-appearance:none;
1416
1223
  -moz-appearance:none;
1417
1224
  appearance:none;
1418
- cursor:var(--tds-checkbox-cursor);
1419
- background-color:var(--tds-checkbox-input-background-color);
1420
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1421
- border-radius:var(--tds-checkbox-input-border-radius);
1225
+ cursor:var(--tds-radio-cursor);
1226
+ background-color:var(--tds-radio-input-background-color);
1227
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1228
+ border-radius:var(--tds-radio-input-border-radius);
1422
1229
  transition-timing-function:var(--t-ease-in-out);
1423
1230
  transition-duration:var(--t-duration-200);
1424
- transition-property:var(--tds-checkbox-transition-property);
1231
+ transition-property:var(--tds-radio-transition-property);
1425
1232
  }
1426
1233
 
1427
- :is(.tds-checkbox input[type="checkbox"])::before{
1428
- position:absolute;
1429
- top:50%;
1430
- left:50%;
1431
- visibility:var(--tds-checkbox-input-icon-visibility);
1432
- width:100%;
1433
- height:100%;
1434
- content:"";
1435
- background-color:var(--tds-checkbox-input-icon-fill);
1436
- border-radius:var(--tds-checkbox-input-border-radius);
1437
- opacity:var(--tds-checkbox-input-icon-opacity);
1438
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1439
- mask-image:var(--tds-checkbox-input-icon);
1440
- -webkit-mask-repeat:no-repeat;
1441
- mask-repeat:no-repeat;
1442
- -webkit-mask-size:contain;
1443
- mask-size:contain;
1444
- transform:translate(-50%, -50%);
1445
- }
1446
-
1447
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1448
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1449
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1234
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1235
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1236
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1450
1237
  }
1451
1238
 
1452
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1239
+ :is(.tds-radio input[type="radio"]):focus-visible{
1453
1240
  outline:var(--t-focus-ring-outline);
1454
1241
  outline-offset:var(--t-focus-ring-offset);
1455
1242
  }
1456
1243
 
1457
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1244
+ :is(.tds-radio input[type="radio"]):disabled{
1458
1245
  pointer-events:none;
1459
1246
  }
1460
1247
 
1461
1248
  @media (prefers-reduced-motion: reduce){
1462
1249
 
1463
- .tds-checkbox input[type="checkbox"]{
1464
- --tds-checkbox-transition-property:none;
1250
+ .tds-radio input[type="radio"]{
1251
+ --tds-radio-transition-property:none;
1465
1252
  }
1466
1253
  }
1467
1254
 
1468
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1469
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1470
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1471
- --tds-checkbox-input-icon-visibility:visible;
1472
- --tds-checkbox-input-icon-opacity:1;
1255
+ .tds-radio:has(input:checked){
1256
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1257
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1258
+ --tds-radio-input-border-width:4px;
1473
1259
  }
1474
1260
 
1475
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1476
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1477
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1261
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1262
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1263
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1478
1264
  }
1479
1265
 
1480
- .tds-checkbox:has(input:checked){
1481
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1266
+ .tds-radio:has(input:user-invalid){
1267
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1482
1268
  }
1483
1269
 
1484
- .tds-checkbox:has(input:indeterminate){
1485
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1270
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1271
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1272
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1273
+ }
1274
+
1275
+ .tds-radio:has(input:disabled){
1276
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1277
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1278
+
1279
+ --tds-radio-label-color:var(--t-form-color-disabled);
1280
+ --tds-radio-description-color:var(--t-form-color-disabled);
1281
+ --tds-radio-cursor:not-allowed;
1486
1282
  }
1487
1283
 
1488
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1489
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1490
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1491
- --tds-checkbox-description-invalid-icon-display:inline-block;
1284
+ .tds-radio:has(input:disabled) input:checked{
1285
+ --tds-radio-input-background-color:var(--t-form-background-color);
1286
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1287
+ }
1288
+
1289
+ .tds-radio-description{
1290
+ display:flex;
1291
+ grid-area:2 / 2;
1292
+ gap:var(--t-spacing-half);
1293
+ align-items:flex-start;
1294
+ padding-inline-start:var(--t-spacing-1);
1295
+ margin:0;
1296
+ font-size:var(--tds-radio-description-font-size);
1297
+ line-height:var(--tds-radio-description-line-height);
1298
+ color:var(--tds-radio-description-color);
1299
+ cursor:text;
1300
+ }
1301
+
1302
+ .tds-radio--sm{
1303
+ --tds-radio-line-height:1.35;
1304
+ --tds-radio-input-size:var(--t-element-size-sm);
1305
+ --tds-radio-font-size:var(--t-font-size-sm);
1306
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1307
+ --tds-radio-description-line-height:1.3;
1308
+ }
1309
+
1310
+ .tds-input:has(textarea){
1311
+ --tds-input-padding-block:6px;
1312
+ --tds-input-resizer-size:var(--t-element-size-sm);
1313
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1314
+ }
1315
+
1316
+ @supports (x: attr(x type(*))){
1317
+
1318
+ .tds-input textarea{
1319
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1320
+ }
1492
1321
  }
1493
1322
 
1494
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1495
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1496
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1323
+ .tds-input.tds-textarea--resize-vertical textarea{
1324
+ resize:vertical;
1497
1325
  }
1498
1326
 
1499
- :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{
1500
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1501
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1327
+ .tds-input.tds-textarea--resize-none textarea{
1328
+ resize:none;
1502
1329
  }
1503
1330
 
1504
- :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){
1505
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1506
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1331
+ .tds-input.tds-textarea--resize-auto textarea{
1332
+ resize:vertical;
1333
+ }
1334
+
1335
+ @supports (field-sizing: content){
1336
+ .tds-input.tds-textarea--resize-auto textarea{
1337
+ field-sizing:content;
1338
+ resize:none;
1507
1339
  }
1340
+ }
1341
+
1342
+ .tds-input textarea{
1343
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1344
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1345
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1346
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1347
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1348
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1349
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1350
+ --tds-input-scrollbar-thumb-border-radius:999px;
1351
+ --tds-input-scrollbar-thumb-border-width:3px;
1352
+ --tds-input-scrollbar-track-margin-block:.125rem;
1353
+ scrollbar-color:initial;
1354
+ transition-timing-function:var(--t-ease-in-out);
1355
+ transition-duration:var(--t-duration-200);
1356
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1357
+ }
1358
+
1359
+ @media (pointer: fine){
1360
+ :is(.tds-input textarea)::-webkit-scrollbar{
1361
+ width:12px;
1362
+ height:12px;
1363
+ cursor:default;
1364
+ }
1365
+
1366
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1367
+ cursor:default;
1368
+ background:var(--tds-input-scrollbar-thumb-color);
1369
+ background-clip:content-box;
1370
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1371
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1372
+ }
1373
+
1374
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1375
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1376
+ }
1377
+
1378
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1379
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1380
+ }
1508
1381
 
1509
- .tds-checkbox:has(input:required) label::after{
1510
- margin-left:.25ch;
1511
- color:var(--t-text-color-status-error);
1512
- content:"*";
1382
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1383
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1513
1384
  }
1514
1385
 
1515
- .tds-checkbox:has(input:disabled){
1516
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1517
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1386
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1387
+ background:var(--tds-input-scrollbar-surface-color);
1388
+ }
1518
1389
 
1519
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1520
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1521
- --tds-checkbox-cursor:not-allowed;
1522
- }
1390
+ :is(.tds-input textarea)::-webkit-resizer{
1391
+ background:var(--tds-input-resizer-icon) no-repeat;
1392
+ background-position:right bottom;
1393
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1394
+ }
1523
1395
 
1524
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1525
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1396
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1397
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1398
+ cursor:default;
1526
1399
  }
1527
1400
 
1528
- .tds-checkbox-description{
1529
- display:flex;
1530
- grid-area:2 / 2;
1531
- gap:var(--t-spacing-half);
1532
- align-items:flex-start;
1533
- padding-inline-start:var(--t-spacing-1);
1534
- margin:0;
1535
- font-size:var(--tds-checkbox-description-font-size);
1536
- line-height:var(--tds-checkbox-description-line-height);
1537
- color:var(--tds-checkbox-description-color);
1538
- cursor:text;
1539
- }
1401
+ @supports (-moz-appearance: none){
1402
+ :is(.tds-input textarea){
1403
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1404
+ scrollbar-width:thin;
1405
+ }
1540
1406
 
1541
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1542
- display:var(--tds-checkbox-description-invalid-icon-display);
1543
- flex-shrink:0;
1544
- margin-top:calc(.5lh - .5em);
1545
- line-height:var(--tds-checkbox-description-line-height);
1407
+ @media (hover){
1408
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1409
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1410
+ }
1411
+ }
1412
+ }
1546
1413
  }
1547
1414
 
1548
- .tds-checkbox--sm{
1549
- --tds-checkbox-line-height:1.35;
1550
- --tds-checkbox-input-size:var(--t-element-size-sm);
1551
- --tds-checkbox-font-size:var(--t-font-size-sm);
1552
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1553
- --tds-checkbox-description-line-height:1.3;
1554
- }
1555
-
1556
- .tds-checkbox-group{
1557
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1558
- --tds-checkbox-group-line-height:1.4;
1559
- --tds-checkbox-group-gap:var(--t-spacing-1);
1415
+ .tds-radio-group{
1416
+ --tds-radio-group-font-size:var(--t-font-size-md);
1417
+ --tds-radio-group-line-height:1.4;
1418
+ --tds-radio-group-gap:var(--t-spacing-1);
1560
1419
 
1561
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1562
- --tds-checkbox-group-description-line-height:1.35;
1563
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1564
- --tds-checkbox-group-description-invalid-icon-display:none;
1420
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1421
+ --tds-radio-group-description-line-height:1.35;
1422
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1423
+ --tds-radio-group-description-invalid-icon-display:none;
1565
1424
  display:flex;
1566
1425
  flex-direction:column;
1567
1426
  gap:0;
1568
1427
  padding:0;
1569
1428
  margin:0;
1570
1429
 
1571
- font-size:var(--tds-checkbox-group-font-size);
1572
- line-height:var(--tds-checkbox-group-line-height);
1430
+ font-size:var(--tds-radio-group-font-size);
1431
+ line-height:var(--tds-radio-group-line-height);
1573
1432
  border:0;
1574
1433
  }
1575
1434
 
1576
- .tds-checkbox-group legend{
1435
+ .tds-radio-group legend{
1577
1436
  float:left;
1578
1437
  padding:0;
1579
1438
  margin:0;
1580
1439
  }
1581
1440
 
1582
- .tds-checkbox-group[aria-invalid="true"]{
1583
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1584
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1441
+ .tds-radio-group[aria-invalid="true"]{
1442
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1443
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1585
1444
  }
1586
1445
 
1587
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1446
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1447
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1448
+ }
1449
+
1450
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1451
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1452
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1453
+ }
1454
+
1455
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1456
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1457
+ }
1458
+
1459
+ .tds-radio-group:has(input:required) legend::after{
1588
1460
  margin-left:.25ch;
1589
1461
  color:var(--t-text-color-status-error);
1590
1462
  content:"*";
1591
1463
  }
1592
1464
 
1593
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1594
- content:none;
1595
- }
1596
-
1597
- .tds-checkbox-group-fields{
1465
+ .tds-radio-group-fields{
1598
1466
  display:flex;
1599
1467
  flex-direction:column;
1600
- gap:var(--tds-checkbox-group-gap);
1468
+ gap:var(--tds-radio-group-gap);
1601
1469
  align-items:flex-start;
1602
1470
  margin-top:var(--t-spacing-1);
1603
1471
  }
1604
1472
 
1605
- .tds-checkbox-group-description{
1473
+ .tds-radio-group-description{
1606
1474
  display:flex;
1607
1475
  gap:var(--t-spacing-half);
1608
1476
  align-items:flex-start;
1609
1477
  margin:var(--t-spacing-fourth) 0 0;
1610
- font-size:var(--tds-checkbox-group-description-font-size);
1611
- line-height:var(--tds-checkbox-group-description-line-height);
1612
- color:var(--tds-checkbox-group-description-color);
1478
+ font-size:var(--tds-radio-group-description-font-size);
1479
+ line-height:var(--tds-radio-group-description-line-height);
1480
+ color:var(--tds-radio-group-description-color);
1613
1481
  cursor:text;
1614
1482
  }
1615
1483
 
1616
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1617
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1484
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1485
+ display:var(--tds-radio-group-description-invalid-icon-display);
1618
1486
  flex-shrink:0;
1619
1487
  margin-top:calc(.5lh - .5em);
1620
- line-height:var(--tds-checkbox-group-description-line-height);
1488
+ line-height:var(--tds-radio-group-description-line-height);
1621
1489
  }
1622
1490
 
1623
- .tds-checkbox-group--sm{
1624
- --tds-checkbox-group-line-height:1.35;
1625
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1626
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1627
- --tds-checkbox-group-description-line-height:1.3;
1491
+ .tds-radio-group--sm{
1492
+ --tds-radio-group-line-height:1.35;
1493
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1494
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1495
+ --tds-radio-group-description-line-height:1.3;
1628
1496
  }
1629
1497
 
1498
+ .tds-toggle-switch{
1499
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1500
+ --tds-toggle-switch-cursor:pointer;
1501
+ --tds-toggle-switch-display:inline-grid;
1502
+ --tds-toggle-switch-line-height:1.4;
1630
1503
 
1631
- :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{
1632
- -webkit-appearance:none;
1633
- appearance:none;
1634
- }
1504
+ --tds-toggle-switch-label-color:var(--t-form-color);
1635
1505
 
1636
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1637
- inline-size:1em;
1638
- block-size:2em;
1506
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1507
+ --tds-toggle-switch-track-outline:none;
1508
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1509
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1510
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1511
+
1512
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1513
+ --tds-toggle-switch-thumb-transform:translateX(0);
1514
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1515
+
1516
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1517
+ --tds-toggle-switch-description-line-height:1.35;
1518
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1519
+ position:relative;
1520
+
1521
+ display:var(--tds-toggle-switch-display);
1522
+ grid-template-columns:auto;
1523
+ grid-auto-columns:1fr;
1524
+ gap:var(--t-spacing-fourth) 0;
1525
+ -webkit-user-select:none;
1526
+ -moz-user-select:none;
1527
+ user-select:none;
1528
+ }
1529
+
1530
+ .tds-toggle-switch input[type="checkbox"]{
1531
+ position:absolute;
1532
+ width:var(--tds-toggle-switch-track-width);
1533
+ height:var(--tds-toggle-switch-track-height);
1534
+ margin:0;
1535
+ -webkit-appearance:none;
1536
+ -moz-appearance:none;
1537
+ appearance:none;
1538
+ cursor:var(--tds-toggle-switch-cursor);
1539
+ outline:var(--tds-toggle-switch-track-outline);
1540
+ outline-offset:var(--t-focus-ring-offset);
1541
+ background-color:transparent;
1542
+ border:0;
1543
+ border-radius:var(--t-border-radius-round);
1544
+ }
1545
+
1546
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1547
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1639
1548
  }
1640
- @supports (field-sizing: content){
1641
- .tds-input--auto-width{
1642
- inline-size:-moz-fit-content;
1643
- inline-size:fit-content;
1644
- min-inline-size:min(100%, 122px);
1549
+
1550
+ .tds-toggle-switch label{
1551
+ display:inline-flex;
1552
+ grid-area:1 / 2;
1553
+ padding-inline-start:var(--t-spacing-1);
1554
+ margin-top:-.09375em;
1555
+ font-size:var(--tds-toggle-switch-font-size);
1556
+ font-weight:var(--t-font-weight-normal);
1557
+ line-height:var(--tds-toggle-switch-line-height);
1558
+ color:var(--tds-toggle-switch-label-color);
1559
+ cursor:var(--tds-toggle-switch-cursor);
1645
1560
  }
1646
1561
 
1647
- .tds-input--auto-width input{
1648
- field-sizing:content;
1649
- inline-size:auto;
1562
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1563
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1650
1564
  }
1651
- }
1652
1565
 
1653
- .tds-modal-overlay{
1654
- --tds-modal-min-margin-block:var(--t-spacing-3);
1566
+ .tds-toggle-switch:has(input:checked){
1567
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1568
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1569
+ }
1655
1570
 
1656
- position:fixed;
1657
- inset:0;
1658
- z-index:1000;
1659
- display:grid;
1660
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1661
- justify-items:center;
1662
- overflow-y:auto;
1663
- background:hsl(0 0% 0% / 40%);
1571
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1572
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1573
+ }
1574
+
1575
+ .tds-toggle-switch:has(input:disabled){
1576
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1577
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1578
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1579
+ --tds-toggle-switch-cursor:not-allowed;
1580
+ }
1581
+
1582
+ .tds-toggle-switch-track{
1583
+ position:relative;
1584
+ flex-shrink:0;
1585
+ width:var(--tds-toggle-switch-track-width);
1586
+ height:var(--tds-toggle-switch-track-height);
1587
+ background-color:var(--tds-toggle-switch-track-background-color);
1588
+ border-radius:var(--t-border-radius-round);
1589
+ transition:var(--tds-toggle-switch-track-transition);
1664
1590
  }
1665
1591
 
1666
- .tds-modal-overlay[data-entering]{
1667
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1592
+ .tds-toggle-switch-track::before{
1593
+ position:absolute;
1594
+ top:var(--t-spacing-fourth);
1595
+ left:var(--t-spacing-fourth);
1596
+ width:var(--tds-toggle-switch-thumb-size);
1597
+ height:var(--tds-toggle-switch-thumb-size);
1598
+ content:"";
1599
+ background-color:#fff;
1600
+ border-radius:var(--t-border-radius-round);
1601
+ transform:var(--tds-toggle-switch-thumb-transform);
1602
+ transition:var(--tds-toggle-switch-thumb-transition);
1668
1603
  }
1669
1604
 
1670
- .tds-modal-overlay[data-exiting]{
1671
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1672
- }
1605
+ @media (prefers-reduced-motion: reduce){
1673
1606
 
1674
- @keyframes tds-modal-overlay-fade{
1675
- from{
1676
- opacity:0;
1677
- }
1607
+ .tds-toggle-switch-track{
1608
+ --tds-toggle-switch-track-transition:none;
1609
+ --tds-toggle-switch-thumb-transition:none;
1678
1610
  }
1611
+ }
1679
1612
 
1680
- .tds-modal-frame{
1681
- --tds-modal-width:600px;
1682
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1613
+ .tds-toggle-switch-description{
1683
1614
  display:flex;
1615
+ grid-area:2 / 2;
1616
+ align-items:flex-start;
1617
+ padding-inline-start:var(--t-spacing-1);
1618
+ margin:0;
1619
+ font-size:var(--tds-toggle-switch-description-font-size);
1620
+ line-height:var(--tds-toggle-switch-description-line-height);
1621
+ color:var(--tds-toggle-switch-description-color);
1622
+ cursor:text;
1623
+ }
1684
1624
 
1685
- grid-row:2;
1686
- justify-content:center;
1687
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1625
+ .tds-toggle-switch--sm{
1626
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1627
+ --tds-toggle-switch-line-height:1.35;
1628
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1629
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1630
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1631
+ --tds-toggle-switch-description-line-height:1.3;
1688
1632
  }
1689
1633
 
1690
- .tds-modal-frame[data-entering]{
1691
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1692
- }
1634
+ .tds-toggle-switch--hide-label{
1635
+ --tds-toggle-switch-display:inline-flex;
1636
+ }
1693
1637
 
1694
- .tds-modal-frame[data-exiting]{
1695
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1638
+ @layer t-critical{
1639
+ tds-page-header:not(.hydrated){
1640
+ display:none;
1696
1641
  }
1697
-
1698
- .tds-modal-frame--sm{
1699
- --tds-modal-width:400px;
1700
1642
  }
1701
1643
 
1702
- .tds-modal-frame--lg{
1703
- --tds-modal-width:800px;
1704
- }
1644
+ @layer t-component{
1645
+ .tds-page-header{
1646
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1647
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1648
+ --tds-page-header-color:var(--t-text-color);
1649
+ --tds-page-header-bottom-border-color:transparent;
1650
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1651
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1652
+ --tds-page-header-padding-x:var(--t-spacing-2);
1653
+ --tds-page-header-padding-y:var(--t-spacing-2);
1654
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1655
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1656
+ --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%);
1657
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1658
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1659
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1660
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1661
+ --tds-page-header-nav-item-border-width:1px;
1705
1662
 
1706
- .tds-modal-frame--xl{
1707
- --tds-modal-width:1000px;
1708
- }
1663
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1664
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1709
1665
 
1710
- @keyframes tds-modal-zoom{
1711
- from{
1712
- opacity:0;
1713
- scale:.96;
1666
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1667
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1668
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1669
+
1670
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1671
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1672
+
1673
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1674
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1675
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1676
+
1677
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1678
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1679
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1680
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1681
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1714
1682
  }
1715
- }
1716
1683
 
1717
- @media (prefers-reduced-motion: reduce){
1718
- .tds-modal-overlay[data-entering],
1719
- .tds-modal-overlay[data-exiting],
1720
- .tds-modal-frame[data-entering],
1721
- .tds-modal-frame[data-exiting]{
1722
- animation:none;
1684
+ .tds-page-header--profile{
1685
+ --tds-page-header-padding-y:20px;
1686
+ }
1687
+
1688
+ @supports (color: light-dark(#fff, #000)){
1689
+ .tds-page-header{
1690
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1691
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1692
+ }
1693
+ }
1694
+
1695
+ @media (min-width: 600px){
1696
+ .tds-page-header{
1697
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1698
+ --tds-page-header-color:var(--t-text-color-secondary);
1699
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1700
+ --tds-page-header-padding-x:var(--t-spacing-3);
1701
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1702
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1703
+ --tds-page-header-nav-background:transparent;
1704
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1705
+ --tds-page-header-nav-item-border-width:1px;
1706
+ --tds-page-header-nav-item-color:var(--t-text-color);
1707
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1708
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1709
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1710
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1711
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1712
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1713
+ }
1723
1714
  }
1724
1715
  }
1725
1716
 
1726
- .tds-modal{
1717
+ .tds-page-header{
1727
1718
  display:flex;
1728
1719
  flex-direction:column;
1729
- width:100%;
1730
- padding-block-start:var(--t-spacing-3);
1731
- padding-inline:0;
1732
- background:var(--t-surface-color-card);
1733
-
1734
- border:0;
1735
- border-radius:var(--t-border-radius-lg);
1736
- box-shadow:0 4px 18px 0 #0003;
1720
+ padding-top:var(--tds-page-header-padding-y);
1721
+ color:var(--tds-page-header-color);
1722
+ background:var(--tds-page-header-background-color);
1723
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1737
1724
  }
1738
1725
 
1739
- .tds-modal:focus{
1740
- outline:none;
1726
+ .tds-page-header:not(.has-nav){
1727
+ padding-bottom:var(--tds-page-header-padding-y);
1741
1728
  }
1742
1729
 
1743
- .tds-modal-header{
1744
- display:grid;
1745
- grid-template-columns:1fr auto;
1746
- -moz-column-gap:var(--t-spacing-2);
1747
- column-gap:var(--t-spacing-2);
1748
- padding-block:0;
1749
- padding-inline:var(--t-spacing-4);
1750
- }
1730
+ .tds-page-header.inactive{
1731
+ background:var(--tds-page-header-background-color-inactive);
1732
+ }
1751
1733
 
1752
- .tds-modal-title{
1753
- grid-row:1;
1754
- grid-column:1;
1755
- margin:0;
1756
- font-size:var(--t-font-size-2xl);
1757
- font-weight:var(--t-font-weight-medium);
1758
- line-height:140%;
1759
- color:var(--t-text-color-headline);
1760
- }
1734
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1735
+ width:100%;
1736
+ }
1761
1737
 
1762
- .tds-modal-subtitle{
1763
- grid-row:2;
1764
- grid-column:1;
1765
- margin:0;
1766
- font-size:var(--t-font-size-md);
1767
- font-weight:var(--t-font-weight-medium);
1768
- line-height:140%;
1769
- color:var(--t-text-color-secondary);
1770
- }
1738
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1739
+ display:flex;
1740
+ flex-flow:row wrap;
1741
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1742
+ align-items:flex-start;
1743
+ justify-content:flex-start;
1744
+ min-width:0;
1745
+ }
1771
1746
 
1772
- .tds-modal-close{
1773
- grid-row:1;
1774
- grid-column:2;
1775
- align-self:center;
1776
- color:var(--t-icon-color-dim);
1777
- }
1747
+ :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{
1748
+ display:flex;
1749
+ gap:var(--tds-page-header-nav-gap);
1750
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1751
+ margin:0 0 -1px;
1752
+ overflow:auto;
1753
+ list-style:none;
1754
+ background:var(--tds-page-header-nav-background);
1755
+ }
1778
1756
 
1779
- .tds-modal-body{
1780
- padding-block:var(--t-spacing-3);
1781
- padding-inline:var(--t-spacing-4);
1782
- }
1757
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1758
+ position:relative;
1759
+ display:inline-flex;
1760
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1761
+ font-size:var(--t-font-size-sm);
1762
+ line-height:22px;
1763
+ color:var(--tds-page-header-nav-item-color);
1764
+ white-space:nowrap;
1765
+ text-decoration:none;
1766
+ -webkit-appearance:none;
1767
+ -moz-appearance:none;
1768
+ appearance:none;
1769
+ cursor:pointer;
1770
+ outline-offset:-2px;
1771
+ background-color:var(--tds-page-header-nav-item-background-color);
1772
+ background-clip:padding-box;
1773
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1774
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1775
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1776
+ }
1783
1777
 
1784
- .tds-modal-body--full-width{
1785
- padding-inline:0;
1786
- }
1778
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1779
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1780
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1781
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1782
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1783
+ }
1784
+
1785
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1786
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1787
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1788
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1789
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1790
+ }
1791
+
1792
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1793
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1794
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1795
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1796
+ }
1787
1797
 
1788
- .tds-modal-footer{
1789
- display:flex;
1790
- gap:var(--t-spacing-2);
1791
- align-items:center;
1792
- justify-content:flex-end;
1793
- padding-block:var(--t-spacing-3);
1794
- padding-inline:var(--t-spacing-4);
1795
- border-top:1px solid var(--t-border-color);
1796
- }
1798
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1799
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1800
+ color:var(--tds-page-header-nav-item-color-disabled);
1801
+ cursor:not-allowed;
1802
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1803
+ opacity:1;
1804
+ }
1797
1805
 
1798
- .tds-modal-footer > [slot="start"]{
1799
- margin-inline-end:auto;
1800
- }
1806
+ @media (min-width: 600px){
1807
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1808
+ position:absolute;
1809
+ inset:auto -1px -1px;
1810
+ height:1px;
1811
+ pointer-events:none;
1812
+ content:"";
1813
+ background-color:var(--tds-page-header-bottom-border-color);
1814
+ }
1815
+ }
1801
1816
 
1802
- @media (min-width: 720px){
1803
- .tds-modal-overlay{
1804
- --tds-modal-min-margin-block:0;
1805
- }
1817
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1818
+ position:relative;
1819
+ }
1806
1820
 
1807
- .tds-modal-footer{
1808
- position:sticky;
1809
- bottom:0;
1810
- background:var(--t-surface-color-card);
1811
- border-end-start-radius:var(--t-border-radius-lg);
1812
- border-end-end-radius:var(--t-border-radius-lg);
1813
- }
1814
- }
1821
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1822
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1823
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1824
+ }
1815
1825
 
1816
- .tds-radio{
1817
- --tds-radio-font-size:var(--t-font-size-md);
1818
- --tds-radio-cursor:pointer;
1819
- --tds-radio-line-height:1.4;
1820
- --tds-radio-transition-property:border-width;
1826
+ :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{
1827
+ position:absolute;
1828
+ top:-5px;
1829
+ right:-2px;
1830
+ width:10px;
1831
+ height:10px;
1832
+ content:"";
1833
+ background:var(--tds-page-header-nav-item-indicator-color);
1834
+ border-radius:50%;
1835
+ }
1821
1836
 
1822
- --tds-radio-input-size:var(--t-element-size-md);
1823
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1824
- --tds-radio-input-border-color:var(--t-form-border-color);
1825
- --tds-radio-input-border-width:var(--t-form-border-width);
1826
- --tds-radio-input-background-color:var(--t-form-background-color);
1837
+ @media (prefers-reduced-motion: no-preference){
1838
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1839
+ animation:indicator-pulse 1.25s ease infinite;
1840
+ }
1841
+ }
1827
1842
 
1828
- --tds-radio-label-color:var(--t-form-color);
1843
+ .tds-page-header__title-bar{
1844
+ display:flex;
1845
+ flex-direction:column;
1846
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1847
+ align-items:flex-start;
1848
+ justify-content:space-between;
1849
+ padding:0 var(--tds-page-header-padding-x);
1850
+ }
1829
1851
 
1830
- --tds-radio-description-font-size:var(--t-font-size-sm);
1831
- --tds-radio-description-line-height:1.35;
1832
- --tds-radio-description-color:var(--t-text-color-secondary);
1852
+ .tds-page-header--profile > .tds-page-header__title-bar{
1853
+ align-items:center;
1854
+ }
1833
1855
 
1834
- position:relative;
1835
- display:inline-grid;
1836
- grid-template-columns:auto;
1837
- grid-auto-columns:1fr;
1838
- gap:var(--t-spacing-fourth) 0;
1839
- line-height:var(--tds-radio-line-height);
1840
- -webkit-user-select:none;
1841
- -moz-user-select:none;
1842
- user-select:none;
1856
+ .tds-page-header__primary{
1857
+ width:100%;
1843
1858
  }
1844
1859
 
1845
- .tds-radio label{
1846
- grid-area:1 / 2;
1847
- padding-inline-start:var(--t-spacing-1);
1848
- font-size:var(--tds-radio-font-size);
1860
+ .tds-page-header__primary h1{
1861
+ margin:0;
1862
+ font-size:var(--tds-page-header-headline-font-size);
1849
1863
  font-weight:var(--t-font-weight-normal);
1850
- color:var(--tds-radio-label-color);
1851
- cursor:var(--tds-radio-cursor);
1864
+ line-height:32px;
1865
+ color:var(--tds-page-header-headline-color);
1866
+ overflow-wrap:break-word;
1852
1867
  }
1853
1868
 
1854
- .tds-radio input[type="radio"]{
1855
- position:relative;
1856
- width:1em;
1857
- height:1em;
1858
- margin:calc((1lh - 1em) / 2) 0 0;
1859
- font-size:var(--tds-radio-font-size);
1860
- line-height:inherit;
1861
- -webkit-appearance:none;
1862
- -moz-appearance:none;
1863
- appearance:none;
1864
- cursor:var(--tds-radio-cursor);
1865
- background-color:var(--tds-radio-input-background-color);
1866
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1867
- border-radius:var(--tds-radio-input-border-radius);
1868
- transition-timing-function:var(--t-ease-in-out);
1869
- transition-duration:var(--t-duration-200);
1870
- transition-property:var(--tds-radio-transition-property);
1869
+ @media (min-width: 960px){
1870
+ .tds-page-header__primary{
1871
+ flex:1 1 max-content;
1872
+ width:auto;
1873
+ min-width:0;
1874
+ max-width:100%;
1871
1875
  }
1872
1876
 
1873
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1874
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1875
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1876
- }
1877
-
1878
- :is(.tds-radio input[type="radio"]):focus-visible{
1879
- outline:var(--t-focus-ring-outline);
1880
- outline-offset:var(--t-focus-ring-offset);
1877
+ .tds-page-header__title-bar,
1878
+ .tds-page-header--profile .tds-page-header__title-bar{
1879
+ flex-flow:row nowrap;
1880
+ row-gap:12px;
1881
+ align-items:flex-start;
1882
+ }
1883
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1884
+ width:auto;
1881
1885
  }
1882
1886
 
1883
- :is(.tds-radio input[type="radio"]):disabled{
1884
- pointer-events:none;
1887
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1888
+ justify-content:flex-end;
1885
1889
  }
1890
+ }
1886
1891
 
1887
- @media (prefers-reduced-motion: reduce){
1888
-
1889
- .tds-radio input[type="radio"]{
1890
- --tds-radio-transition-property:none;
1891
- }
1892
- }
1892
+ .tds-page-header-phone,
1893
+ .tds-page-header-email{
1894
+ color:var(--tds-page-header-color);
1895
+ white-space:nowrap;
1896
+ }
1897
+ .tds-page-header-email{
1898
+ max-width:100%;
1899
+ overflow:hidden;
1900
+ text-overflow:ellipsis;
1901
+ }
1893
1902
 
1894
- .tds-radio:has(input:checked){
1895
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1896
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1897
- --tds-radio-input-border-width:4px;
1903
+ @keyframes indicator-pulse{
1904
+ 0%{
1905
+ opacity:.3;
1906
+ transform:scale(.9);
1898
1907
  }
1899
1908
 
1900
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1901
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1902
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1903
- }
1904
-
1905
- .tds-radio:has(input:user-invalid){
1906
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1909
+ 100%{
1910
+ opacity:0;
1911
+ transform:scale(1.75);
1907
1912
  }
1913
+ }
1908
1914
 
1909
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1910
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1911
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1912
- }
1913
1915
 
1914
- .tds-radio:has(input:disabled){
1915
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1916
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1916
+ @media (prefers-reduced-motion: no-preference){
1917
1917
 
1918
- --tds-radio-label-color:var(--t-form-color-disabled);
1919
- --tds-radio-description-color:var(--t-form-color-disabled);
1920
- --tds-radio-cursor:not-allowed;
1918
+ :root{
1919
+ interpolate-size:allow-keywords;
1920
+ }
1921
1921
  }
1922
1922
 
1923
- .tds-radio:has(input:disabled) input:checked{
1924
- --tds-radio-input-background-color:var(--t-form-background-color);
1925
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1926
- }
1927
-
1928
- .tds-radio-description{
1929
- display:flex;
1930
- grid-area:2 / 2;
1931
- gap:var(--t-spacing-half);
1932
- align-items:flex-start;
1933
- padding-inline-start:var(--t-spacing-1);
1934
- margin:0;
1935
- font-size:var(--tds-radio-description-font-size);
1936
- line-height:var(--tds-radio-description-line-height);
1937
- color:var(--tds-radio-description-color);
1938
- cursor:text;
1939
- }
1923
+ @layer tds-component{
1924
+ tds-sidenav,
1925
+ .tds-sidenav{
1926
+ --tds-sidenav-indent:12px;
1927
+ --tds-sidenav-item-depth:0;
1940
1928
 
1941
- .tds-radio--sm{
1942
- --tds-radio-line-height:1.35;
1943
- --tds-radio-input-size:var(--t-element-size-sm);
1944
- --tds-radio-font-size:var(--t-font-size-sm);
1945
- --tds-radio-description-font-size:var(--t-font-size-xs);
1946
- --tds-radio-description-line-height:1.3;
1947
- }
1929
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1948
1930
 
1949
- .tds-radio-group{
1950
- --tds-radio-group-font-size:var(--t-font-size-md);
1951
- --tds-radio-group-line-height:1.4;
1952
- --tds-radio-group-gap:var(--t-spacing-1);
1931
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1932
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1933
+ --tds-sidenav-collapse-closed-opacity:0;
1934
+ --tds-sidenav-collapse-open-opacity:1;
1935
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1936
+ --tds-sidenav-collapse-open-transform:translateY(0);
1953
1937
 
1954
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1955
- --tds-radio-group-description-line-height:1.35;
1956
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1957
- --tds-radio-group-description-invalid-icon-display:none;
1958
- display:flex;
1959
- flex-direction:column;
1960
- gap:0;
1961
- padding:0;
1962
- margin:0;
1938
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1939
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1940
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1941
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1963
1942
 
1964
- font-size:var(--tds-radio-group-font-size);
1965
- line-height:var(--tds-radio-group-line-height);
1966
- border:0;
1967
- }
1943
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1944
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1945
+ --tds-sidenav-item-nested-background-selected:transparent;
1968
1946
 
1969
- .tds-radio-group legend{
1970
- float:left;
1971
- padding:0;
1972
- margin:0;
1973
- }
1947
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1948
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1949
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1974
1950
 
1975
- .tds-radio-group[aria-invalid="true"]{
1976
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1977
- --tds-radio-group-description-invalid-icon-display:inline-block;
1951
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1952
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1978
1953
  }
1979
1954
 
1980
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1981
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1955
+ @media (prefers-reduced-motion: reduce){
1956
+ tds-sidenav,
1957
+ .tds-sidenav{
1958
+ --tds-sidenav-collapse-transition-enter:none;
1959
+ --tds-sidenav-collapse-transition-exit:none;
1960
+ --tds-sidenav-collapse-closed-transform:none;
1961
+ --tds-sidenav-collapse-open-transform:none;
1962
+ }
1982
1963
  }
1983
1964
 
1984
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1985
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1986
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1987
- }
1965
+ .tds-sidenav--theme-gray{
1966
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1967
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1968
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1969
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1970
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1971
+ }
1972
+ }
1988
1973
 
1989
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1990
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1991
- }
1974
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1975
+ display:flex;
1976
+ }
1992
1977
 
1993
- .tds-radio-group:has(input:required) legend::after{
1994
- margin-left:.25ch;
1995
- color:var(--t-text-color-status-error);
1996
- content:"*";
1997
- }
1978
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1979
+ flex-direction:column;
1980
+ gap:var(--t-spacing-half);
1981
+ width:100%;
1982
+ }
1998
1983
 
1999
- .tds-radio-group-fields{
2000
- display:flex;
2001
- flex-direction:column;
2002
- gap:var(--tds-radio-group-gap);
2003
- align-items:flex-start;
2004
- margin-top:var(--t-spacing-1);
1984
+ .tds-sidenav-section-list{
1985
+ width:100%;
1986
+ padding:0;
1987
+ margin:0;
1988
+ list-style:none;
2005
1989
  }
2006
1990
 
2007
- .tds-radio-group-description{
1991
+ .tds-sidenav-section-header{
2008
1992
  display:flex;
2009
- gap:var(--t-spacing-half);
2010
- align-items:flex-start;
2011
- margin:var(--t-spacing-fourth) 0 0;
2012
- font-size:var(--tds-radio-group-description-font-size);
2013
- line-height:var(--tds-radio-group-description-line-height);
2014
- color:var(--tds-radio-group-description-color);
2015
- cursor:text;
1993
+ align-items:baseline;
1994
+ justify-content:space-between;
1995
+ padding-top:var(--t-spacing-2);
2016
1996
  }
2017
1997
 
2018
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2019
- display:var(--tds-radio-group-description-invalid-icon-display);
2020
- flex-shrink:0;
2021
- margin-top:calc(.5lh - .5em);
2022
- line-height:var(--tds-radio-group-description-line-height);
1998
+ .tds-sidenav-section-header h2{
1999
+ margin:0;
2000
+ font-size:var(--t-font-size-sm);
2001
+ font-weight:var(--t-font-weight-semibold);
2002
+ line-height:1.35;
2003
+ color:var(--t-text-color-secondary);
2004
+ text-transform:uppercase;
2023
2005
  }
2024
2006
 
2025
- .tds-radio-group--sm{
2026
- --tds-radio-group-line-height:1.35;
2027
- --tds-radio-group-font-size:var(--t-font-size-sm);
2028
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2029
- --tds-radio-group-description-line-height:1.3;
2030
- }
2031
-
2032
- .tds-toggle-switch{
2033
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2034
- --tds-toggle-switch-cursor:pointer;
2035
- --tds-toggle-switch-display:inline-grid;
2036
- --tds-toggle-switch-line-height:1.4;
2037
-
2038
- --tds-toggle-switch-label-color:var(--t-form-color);
2039
-
2040
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2041
- --tds-toggle-switch-track-outline:none;
2042
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2043
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2044
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2007
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2008
+ padding-top:0;
2009
+ }
2045
2010
 
2046
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2047
- --tds-toggle-switch-thumb-transform:translateX(0);
2048
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2011
+ .tds-sidenav-section-header [slot="label-actions"]{
2012
+ display:flex;
2013
+ gap:var(--t-spacing-half);
2014
+ align-items:center;
2015
+ }
2049
2016
 
2050
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2051
- --tds-toggle-switch-description-line-height:1.35;
2052
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2053
- position:relative;
2017
+ .tds-sidenav-section [slot="section-actions"]{
2018
+ display:flex;
2019
+ gap:12px;
2020
+ align-items:center;
2021
+ min-height:42px;
2022
+ padding:var(--t-spacing-1) 0;
2023
+ }
2054
2024
 
2055
- display:var(--tds-toggle-switch-display);
2056
- grid-template-columns:auto;
2057
- grid-auto-columns:1fr;
2058
- gap:var(--t-spacing-fourth) 0;
2059
- -webkit-user-select:none;
2060
- -moz-user-select:none;
2061
- user-select:none;
2025
+ .tds-sidenav-section-list,
2026
+ .tds-sidenav-item{
2027
+ width:100%;
2028
+ padding:0;
2029
+ margin:0;
2062
2030
  }
2063
2031
 
2064
- .tds-toggle-switch input[type="checkbox"]{
2065
- position:absolute;
2066
- width:var(--tds-toggle-switch-track-width);
2067
- height:var(--tds-toggle-switch-track-height);
2068
- margin:0;
2032
+ .tds-sidenav-item :is(a,button){
2033
+ position:relative;
2034
+ display:flex;
2035
+ gap:12px;
2036
+ align-items:center;
2037
+ width:100%;
2038
+ padding:12px;
2039
+ overflow:hidden;
2040
+ font-size:var(--t-font-size-sm);
2041
+ line-height:18px;
2042
+ color:var(--t-text-color-headline);
2043
+ white-space:nowrap;
2044
+ text-decoration:none;
2069
2045
  -webkit-appearance:none;
2070
2046
  -moz-appearance:none;
2071
2047
  appearance:none;
2072
- cursor:var(--tds-toggle-switch-cursor);
2073
- outline:var(--tds-toggle-switch-track-outline);
2074
- outline-offset:var(--t-focus-ring-offset);
2075
- background-color:transparent;
2048
+ cursor:pointer;
2049
+ background-color:var(--tds-sidenav-item-background, transparent);
2076
2050
  border:0;
2077
- border-radius:var(--t-border-radius-round);
2051
+ border-radius:var(--t-border-radius);
2052
+ transition:var(--tds-sidenav-item-transition);
2078
2053
  }
2079
2054
 
2080
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2081
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2055
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2056
+ display:block;
2057
+ flex:1;
2058
+ overflow:hidden;
2059
+ text-overflow:ellipsis;
2060
+ text-align:left;
2061
+ white-space:nowrap;
2082
2062
  }
2083
2063
 
2084
- .tds-toggle-switch label{
2085
- display:inline-flex;
2086
- grid-area:1 / 2;
2087
- padding-inline-start:var(--t-spacing-1);
2088
- margin-top:-.09375em;
2089
- font-size:var(--tds-toggle-switch-font-size);
2090
- font-weight:var(--t-font-weight-normal);
2091
- line-height:var(--tds-toggle-switch-line-height);
2092
- color:var(--tds-toggle-switch-label-color);
2093
- cursor:var(--tds-toggle-switch-cursor);
2094
- }
2095
-
2096
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2097
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2098
- }
2099
-
2100
- .tds-toggle-switch:has(input:checked){
2101
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2102
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2103
- }
2104
-
2105
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2106
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2064
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2065
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2066
+ color:var(--t-text-color-headline);
2067
+ text-decoration:none;
2107
2068
  }
2108
2069
 
2109
- .tds-toggle-switch:has(input:disabled){
2110
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2111
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2112
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2113
- --tds-toggle-switch-cursor:not-allowed;
2114
- }
2115
-
2116
- .tds-toggle-switch-track{
2117
- position:relative;
2118
- flex-shrink:0;
2119
- width:var(--tds-toggle-switch-track-width);
2120
- height:var(--tds-toggle-switch-track-height);
2121
- background-color:var(--tds-toggle-switch-track-background-color);
2122
- border-radius:var(--t-border-radius-round);
2123
- transition:var(--tds-toggle-switch-track-transition);
2124
- }
2125
-
2126
- .tds-toggle-switch-track::before{
2127
- position:absolute;
2128
- top:var(--t-spacing-fourth);
2129
- left:var(--t-spacing-fourth);
2130
- width:var(--tds-toggle-switch-thumb-size);
2131
- height:var(--tds-toggle-switch-thumb-size);
2132
- content:"";
2133
- background-color:#fff;
2134
- border-radius:var(--t-border-radius-round);
2135
- transform:var(--tds-toggle-switch-thumb-transform);
2136
- transition:var(--tds-toggle-switch-thumb-transition);
2137
- }
2070
+ :is(.tds-sidenav-item :is(a,button)):active{
2071
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2072
+ }
2138
2073
 
2139
- @media (prefers-reduced-motion: reduce){
2074
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2075
+ overflow:hidden;
2076
+ color:var(--tds-sidenav-item-icon-color);
2077
+ }
2140
2078
 
2141
- .tds-toggle-switch-track{
2142
- --tds-toggle-switch-track-transition:none;
2143
- --tds-toggle-switch-thumb-transition:none;
2144
- }
2145
- }
2079
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
2080
+ display:block;
2081
+ width:var(--tds-sidenav-item-icon-size);
2082
+ height:var(--tds-sidenav-item-icon-size);
2083
+ }
2146
2084
 
2147
- .tds-toggle-switch-description{
2148
- display:flex;
2149
- grid-area:2 / 2;
2150
- align-items:flex-start;
2151
- padding-inline-start:var(--t-spacing-1);
2152
- margin:0;
2153
- font-size:var(--tds-toggle-switch-description-font-size);
2154
- line-height:var(--tds-toggle-switch-description-line-height);
2155
- color:var(--tds-toggle-switch-description-color);
2156
- cursor:text;
2157
- }
2085
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2086
+ --tds-sidenav-indent:19px;
2087
+ }
2158
2088
 
2159
- .tds-toggle-switch--sm{
2160
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2161
- --tds-toggle-switch-line-height:1.35;
2162
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2163
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2164
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2165
- --tds-toggle-switch-description-line-height:1.3;
2166
- }
2089
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2090
+ visibility:visible;
2091
+ block-size:auto;
2092
+ opacity:1;
2093
+ }
2167
2094
 
2168
- .tds-toggle-switch--hide-label{
2169
- --tds-toggle-switch-display:inline-flex;
2170
- }
2095
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2096
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2097
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2171
2098
 
2172
- .tds-input:has(textarea){
2173
- --tds-input-padding-block:6px;
2174
- --tds-input-resizer-size:var(--t-element-size-sm);
2175
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
2176
- }
2099
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2100
+ font-weight:var(--t-font-weight-semibold);
2101
+ }
2177
2102
 
2178
- @supports (x: attr(x type(*))){
2103
+ .tds-sidenav-item:has(.tds-sidenav-section){
2104
+ display:flex;
2105
+ flex-direction:column;
2106
+ gap:var(--t-spacing-half);
2107
+ }
2179
2108
 
2180
- .tds-input textarea{
2181
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2182
- }
2109
+ .tds-sidenav-item .tds-sidenav-section-list{
2110
+ --tds-sidenav-item-depth:1;
2111
+ gap:0;
2183
2112
  }
2184
2113
 
2185
- .tds-input.tds-textarea--resize-vertical textarea{
2186
- resize:vertical;
2114
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2115
+ visibility:hidden;
2116
+ block-size:0;
2117
+ overflow-y:clip;
2118
+ opacity:0;
2119
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2187
2120
  }
2188
2121
 
2189
- .tds-input.tds-textarea--resize-none textarea{
2190
- resize:none;
2122
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2123
+ --tds-sidenav-item-depth:2;
2191
2124
  }
2192
2125
 
2193
- .tds-input.tds-textarea--resize-auto textarea{
2194
- resize:vertical;
2126
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2127
+ min-height:var(--t-element-size-2xl);
2128
+ padding-block:9px;
2129
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2130
+ line-height:1;
2131
+ background-color:transparent;
2195
2132
  }
2196
2133
 
2197
- @supports (field-sizing: content){
2198
- .tds-input.tds-textarea--resize-auto textarea{
2199
- field-sizing:content;
2200
- resize:none;
2134
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2135
+ position:absolute;
2136
+ top:0;
2137
+ bottom:0;
2138
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2139
+ width:2px;
2140
+ content:"";
2141
+ background-color:var(--tds-sidenav-item-nested-border-color);
2142
+ transition:var(--tds-sidenav-item-transition);
2143
+ }
2144
+
2145
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2146
+ position:absolute;
2147
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2148
+ z-index:-1;
2149
+ height:100%;
2150
+ content:"";
2151
+ background-color:var(--tds-sidenav-item-nested-background);
2152
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2153
+ transition:var(--tds-sidenav-item-transition);
2154
+ }
2155
+
2156
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
2157
+ display:block;
2158
+ text-align:left;
2159
+ white-space:normal;
2160
+ }
2161
+
2162
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
2163
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2164
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2165
+ }
2166
+
2167
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2168
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2201
2169
  }
2170
+
2171
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2172
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2173
+ font-weight:var(--t-font-weight-medium);
2202
2174
  }
2203
2175
 
2204
- .tds-input textarea{
2205
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2206
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2207
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2208
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2209
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2210
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2211
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2212
- --tds-input-scrollbar-thumb-border-radius:999px;
2213
- --tds-input-scrollbar-thumb-border-width:3px;
2214
- --tds-input-scrollbar-track-margin-block:.125rem;
2215
- scrollbar-color:initial;
2216
- transition-timing-function:var(--t-ease-in-out);
2217
- transition-duration:var(--t-duration-200);
2218
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2176
+ .tds-sidenav-responsive-header{
2177
+ display:flex;
2178
+ gap:var(--t-spacing-2);
2179
+ align-items:center;
2180
+ width:100%;
2219
2181
  }
2220
2182
 
2221
- @media (pointer: fine){
2222
- :is(.tds-input textarea)::-webkit-scrollbar{
2223
- width:12px;
2224
- height:12px;
2225
- cursor:default;
2226
- }
2183
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2184
+ order:0;
2185
+ }
2227
2186
 
2228
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2229
- cursor:default;
2230
- background:var(--tds-input-scrollbar-thumb-color);
2231
- background-clip:content-box;
2232
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2233
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2234
- }
2187
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2188
+ flex:1;
2189
+ order:1;
2190
+ margin:0;
2191
+ font-size:var(--t-font-size-lg);
2192
+ font-weight:var(--t-font-weight-medium);
2193
+ color:var(--t-text-color-headline);
2194
+ }
2235
2195
 
2236
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2237
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2238
- }
2196
+ @media (max-width: 719px){
2197
+ .tds-sidenav-collapse{
2198
+ z-index:10001;
2199
+ display:none;
2200
+ max-width:min(448px, calc(100vw - 48px));
2201
+ padding:0;
2202
+ margin:12px 0;
2203
+ position-area:bottom span-right;
2204
+ overflow:hidden;
2205
+ outline:0;
2206
+ background:var(--t-surface-color-card);
2207
+ border:0;
2208
+ border-radius:6px;
2209
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2210
+ opacity:var(--tds-sidenav-collapse-open-opacity);
2211
+ transform:var(--tds-sidenav-collapse-open-transform);
2212
+ transition:var(--tds-sidenav-collapse-transition-enter);
2213
+ will-change:transform;
2214
+ }
2239
2215
 
2240
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2241
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2216
+ .tds-sidenav-scroll-container{
2217
+ --webkit-overflow-scrolling:touch;
2218
+ display:block;
2219
+ width:100%;
2220
+ height:-moz-fit-content;
2221
+ height:fit-content;
2222
+ padding:var(--t-spacing-2);
2223
+ overflow-y:auto;
2224
+ }
2225
+
2226
+ .tds-sidenav-item :is(a, button) :is(.prefix){
2227
+ display:none;
2228
+ }
2229
+ @supports selector(:popover-open){
2230
+ .tds-sidenav-collapse:popover-open{
2231
+ display:flex;
2242
2232
  }
2243
2233
 
2244
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2245
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2234
+ .tds-sidenav-collapse:not(:popover-open){
2235
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2236
+ transition:var(--tds-sidenav-collapse-transition-exit);
2246
2237
  }
2247
2238
 
2248
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2249
- background:var(--tds-input-scrollbar-surface-color);
2239
+ @starting-style{
2240
+ .tds-sidenav-collapse:popover-open{
2241
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2242
+ transform:var(--tds-sidenav-collapse-closed-transform);
2243
+ }
2244
+ }
2245
+ }
2246
+ @supports not selector(:popover-open){
2247
+ .tds-sidenav-collapse.\:popover-open{
2248
+ display:flex;
2250
2249
  }
2251
2250
 
2252
- :is(.tds-input textarea)::-webkit-resizer{
2253
- background:var(--tds-input-resizer-icon) no-repeat;
2254
- background-position:right bottom;
2255
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2251
+ .tds-sidenav-collapse:not(.\:popover-open){
2252
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2253
+ transition:var(--tds-sidenav-collapse-transition-exit);
2256
2254
  }
2255
+ }
2256
+ }
2257
2257
 
2258
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2259
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2260
- cursor:default;
2258
+ @media (min-width: 720px){
2259
+ .tds-sidenav-responsive-header{
2260
+ display:none;
2261
+ }
2262
+ }
2263
+
2264
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2265
+ display:none;
2261
2266
  }
2262
2267
 
2263
- @supports (-moz-appearance: none){
2264
- :is(.tds-input textarea){
2265
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2266
- scrollbar-width:thin;
2267
- }
2268
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2269
+ display:block;
2270
+ }
2268
2271
 
2269
- @media (hover){
2270
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2271
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2272
- }
2273
- }
2272
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2273
+ display:flex;
2274
+ flex-direction:column;
2274
2275
  }
2275
- }
2276
2276
 
2277
2277
  .tds-input{
2278
2278
  --tds-input-border-color:var(--t-form-border-color);