@planningcenter/tapestry 4.6.0 → 4.6.1-rc.0

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