@planningcenter/tapestry 4.7.0-rc.0 → 4.7.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 (5) hide show
  1. package/dist/reactRender.css +1284 -1284
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1284 -1284
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,6 +677,201 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
+ .tds-checkbox{
681
+ --tds-checkbox-font-size:var(--t-font-size-md);
682
+ --tds-checkbox-cursor:pointer;
683
+ --tds-checkbox-line-height:1.4;
684
+ --tds-checkbox-transition-property:background-color, border-color;
685
+
686
+ --tds-checkbox-input-size:var(--t-element-size-md);
687
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
688
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
689
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
690
+
691
+ --tds-checkbox-input-icon:none;
692
+ --tds-checkbox-input-icon-visibility:hidden;
693
+ --tds-checkbox-input-icon-opacity:0;
694
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
695
+
696
+ --tds-checkbox-label-color:var(--t-form-color);
697
+
698
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
699
+ --tds-checkbox-description-line-height:1.35;
700
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
701
+ --tds-checkbox-description-invalid-icon-display:none;
702
+
703
+ position:relative;
704
+ display:inline-grid;
705
+ grid-template-columns:auto;
706
+ grid-auto-columns:1fr;
707
+ gap:var(--t-spacing-fourth) 0;
708
+ line-height:var(--tds-checkbox-line-height);
709
+ -webkit-user-select:none;
710
+ -moz-user-select:none;
711
+ user-select:none;
712
+ }
713
+
714
+ .tds-checkbox label{
715
+ grid-area:1 / 2;
716
+ padding-inline-start:var(--t-spacing-1);
717
+ font-size:var(--tds-checkbox-font-size);
718
+ font-weight:var(--t-font-weight-normal);
719
+ color:var(--tds-checkbox-label-color);
720
+ cursor:var(--tds-checkbox-cursor);
721
+ }
722
+
723
+ .tds-checkbox tds-indeterminate{
724
+ display:flex;
725
+ }
726
+
727
+ .tds-checkbox input[type="checkbox"]{
728
+ position:relative;
729
+ width:1em;
730
+ height:1em;
731
+ margin:calc((1lh - 1em) / 2) 0 0;
732
+ font-size:var(--tds-checkbox-font-size);
733
+ line-height:inherit;
734
+ -webkit-appearance:none;
735
+ -moz-appearance:none;
736
+ appearance:none;
737
+ cursor:var(--tds-checkbox-cursor);
738
+ background-color:var(--tds-checkbox-input-background-color);
739
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
740
+ border-radius:var(--tds-checkbox-input-border-radius);
741
+ transition-timing-function:var(--t-ease-in-out);
742
+ transition-duration:var(--t-duration-200);
743
+ transition-property:var(--tds-checkbox-transition-property);
744
+ }
745
+
746
+ :is(.tds-checkbox input[type="checkbox"])::before{
747
+ position:absolute;
748
+ top:50%;
749
+ left:50%;
750
+ visibility:var(--tds-checkbox-input-icon-visibility);
751
+ width:100%;
752
+ height:100%;
753
+ content:"";
754
+ background-color:var(--tds-checkbox-input-icon-fill);
755
+ border-radius:var(--tds-checkbox-input-border-radius);
756
+ opacity:var(--tds-checkbox-input-icon-opacity);
757
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
758
+ mask-image:var(--tds-checkbox-input-icon);
759
+ -webkit-mask-repeat:no-repeat;
760
+ mask-repeat:no-repeat;
761
+ -webkit-mask-size:contain;
762
+ mask-size:contain;
763
+ transform:translate(-50%, -50%);
764
+ }
765
+
766
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
767
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
768
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
769
+ }
770
+
771
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
772
+ outline:var(--t-focus-ring-outline);
773
+ outline-offset:var(--t-focus-ring-offset);
774
+ }
775
+
776
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
777
+ pointer-events:none;
778
+ }
779
+
780
+ @media (prefers-reduced-motion: reduce){
781
+
782
+ .tds-checkbox input[type="checkbox"]{
783
+ --tds-checkbox-transition-property:none;
784
+ }
785
+ }
786
+
787
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
788
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
789
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
790
+ --tds-checkbox-input-icon-visibility:visible;
791
+ --tds-checkbox-input-icon-opacity:1;
792
+ }
793
+
794
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
795
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
796
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
797
+ }
798
+
799
+ .tds-checkbox:has(input:checked){
800
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
801
+ }
802
+
803
+ .tds-checkbox:has(input:indeterminate){
804
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
805
+ }
806
+
807
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
808
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
809
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
810
+ --tds-checkbox-description-invalid-icon-display:inline-block;
811
+ }
812
+
813
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
814
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
815
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
816
+ }
817
+
818
+ :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{
819
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
820
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
821
+ }
822
+
823
+ :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){
824
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
825
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
826
+ }
827
+
828
+ .tds-checkbox:has(input:required) label::after{
829
+ margin-left:.25ch;
830
+ color:var(--t-text-color-status-error);
831
+ content:"*";
832
+ }
833
+
834
+ .tds-checkbox:has(input:disabled){
835
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
836
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
837
+
838
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
839
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
840
+ --tds-checkbox-cursor:not-allowed;
841
+ }
842
+
843
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
844
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
845
+ }
846
+
847
+ .tds-checkbox-description{
848
+ display:flex;
849
+ grid-area:2 / 2;
850
+ gap:var(--t-spacing-half);
851
+ align-items:flex-start;
852
+ padding-inline-start:var(--t-spacing-1);
853
+ margin:0;
854
+ font-size:var(--tds-checkbox-description-font-size);
855
+ line-height:var(--tds-checkbox-description-line-height);
856
+ color:var(--tds-checkbox-description-color);
857
+ cursor:text;
858
+ }
859
+
860
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
861
+ display:var(--tds-checkbox-description-invalid-icon-display);
862
+ flex-shrink:0;
863
+ margin-top:calc(.5lh - .5em);
864
+ line-height:var(--tds-checkbox-description-line-height);
865
+ }
866
+
867
+ .tds-checkbox--sm{
868
+ --tds-checkbox-line-height:1.35;
869
+ --tds-checkbox-input-size:var(--t-element-size-sm);
870
+ --tds-checkbox-font-size:var(--t-font-size-sm);
871
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
872
+ --tds-checkbox-description-line-height:1.3;
873
+ }
874
+
680
875
  .tds-button-group{
681
876
  display:inline-flex;
682
877
  }
@@ -719,628 +914,320 @@
719
914
  border-end-end-radius:var(--tds-btn-border-radius);
720
915
  }
721
916
 
917
+ .tds-checkbox-group{
918
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
919
+ --tds-checkbox-group-line-height:1.4;
920
+ --tds-checkbox-group-gap:var(--t-spacing-1);
722
921
 
723
- @media (prefers-reduced-motion: no-preference){
922
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
923
+ --tds-checkbox-group-description-line-height:1.35;
924
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
925
+ --tds-checkbox-group-description-invalid-icon-display:none;
926
+ display:flex;
927
+ flex-direction:column;
928
+ gap:0;
929
+ padding:0;
930
+ margin:0;
724
931
 
725
- :root{
726
- interpolate-size:allow-keywords;
932
+ font-size:var(--tds-checkbox-group-font-size);
933
+ line-height:var(--tds-checkbox-group-line-height);
934
+ border:0;
727
935
  }
936
+
937
+ .tds-checkbox-group legend{
938
+ float:left;
939
+ padding:0;
940
+ margin:0;
728
941
  }
729
942
 
730
- @layer tds-component{
731
- tds-sidenav,
732
- .tds-sidenav{
733
- --tds-sidenav-indent:12px;
734
- --tds-sidenav-item-depth:0;
943
+ .tds-checkbox-group[aria-invalid="true"]{
944
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
945
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
946
+ }
735
947
 
736
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
948
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
949
+ margin-left:.25ch;
950
+ color:var(--t-text-color-status-error);
951
+ content:"*";
952
+ }
737
953
 
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);
954
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
955
+ content:none;
956
+ }
744
957
 
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);
958
+ .tds-checkbox-group-fields{
959
+ display:flex;
960
+ flex-direction:column;
961
+ gap:var(--tds-checkbox-group-gap);
962
+ align-items:flex-start;
963
+ margin-top:var(--t-spacing-1);
964
+ }
749
965
 
750
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
751
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
752
- --tds-sidenav-item-nested-background-selected:transparent;
753
-
754
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
755
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
756
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
966
+ .tds-checkbox-group-description{
967
+ display:flex;
968
+ gap:var(--t-spacing-half);
969
+ align-items:flex-start;
970
+ margin:var(--t-spacing-fourth) 0 0;
971
+ font-size:var(--tds-checkbox-group-description-font-size);
972
+ line-height:var(--tds-checkbox-group-description-line-height);
973
+ color:var(--tds-checkbox-group-description-color);
974
+ cursor:text;
975
+ }
757
976
 
758
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
759
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
977
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
978
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
979
+ flex-shrink:0;
980
+ margin-top:calc(.5lh - .5em);
981
+ line-height:var(--tds-checkbox-group-description-line-height);
760
982
  }
761
983
 
762
- @media (prefers-reduced-motion: reduce){
763
- tds-sidenav,
764
- .tds-sidenav{
765
- --tds-sidenav-collapse-transition-enter:none;
766
- --tds-sidenav-collapse-transition-exit:none;
767
- --tds-sidenav-collapse-closed-transform:none;
768
- --tds-sidenav-collapse-open-transform:none;
769
- }
984
+ .tds-checkbox-group--sm{
985
+ --tds-checkbox-group-line-height:1.35;
986
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
987
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
988
+ --tds-checkbox-group-description-line-height:1.3;
989
+ }
990
+
991
+
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;
770
995
  }
771
996
 
772
- .tds-sidenav--theme-gray{
773
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
774
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
775
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
776
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
777
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
778
- }
779
- }
997
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
998
+ inline-size:1em;
999
+ block-size:2em;
1000
+ }
780
1001
 
781
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
782
- display:flex;
783
- }
1002
+ [type="file"]:is(.tds-input input){
1003
+ padding-block:var(--t-spacing-half);
1004
+ padding-inline-start:var(--t-spacing-half);
1005
+ }
784
1006
 
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
- }
1007
+ [type="file"]:is(.tds-input input):not(:disabled){
1008
+ color:var(--t-text-color-secondary);
1009
+ }
790
1010
 
791
- .tds-sidenav-section-list{
792
- width:100%;
793
- padding:0;
794
- margin:0;
795
- list-style:none;
796
- }
1011
+ [type="file"]:is(.tds-input input)::file-selector-button{
1012
+ --_file-btn-padding-block:3px;
797
1013
 
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
- }
1014
+ padding-block:var(--_file-btn-padding-block);
1015
+ padding-inline:12px;
1016
+ margin-inline-end:12px;
1017
+ font:inherit;
1018
+ line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
1019
+ color:var(--t-text-color-status-neutral);
1020
+ cursor:pointer;
1021
+ background-color:var(--t-fill-color-button-neutral-solid);
1022
+ border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1023
+ border-radius:var(--t-border-radius-md);
1024
+ transition-timing-function:var(--t-ease-in-out);
1025
+ transition-duration:var(--t-duration-200);
1026
+ transition-property:color, background-color, border-color;
1027
+ }
804
1028
 
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
- }
1029
+ [type="file"]:is(.tds-input input):hover::file-selector-button{
1030
+ background-color:var(--t-fill-color-button-neutral-solid-hover);
1031
+ border-color:var(--t-fill-color-button-neutral-solid-hover);
1032
+ }
813
1033
 
814
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
815
- padding-top:0;
816
- }
1034
+ [type="file"]:is(.tds-input input):active::file-selector-button{
1035
+ background-color:var(--t-fill-color-button-neutral-solid-active);
1036
+ border-color:var(--t-fill-color-button-neutral-solid-active);
1037
+ }
817
1038
 
818
- .tds-sidenav-section-header [slot="label-actions"]{
819
- display:flex;
820
- gap:var(--t-spacing-half);
821
- align-items:center;
1039
+ [type="file"]:is(.tds-input input):disabled::file-selector-button{
1040
+ color:var(--t-text-color-disabled);
1041
+ pointer-events:none;
1042
+ background-color:var(--t-fill-color-button-neutral-solid-disabled);
1043
+ border-color:var(--t-fill-color-button-neutral-solid-disabled);
1044
+ }
1045
+ @supports (field-sizing: content){
1046
+ .tds-input--auto-width{
1047
+ inline-size:-moz-fit-content;
1048
+ inline-size:fit-content;
1049
+ min-inline-size:min(100%, 122px);
822
1050
  }
823
1051
 
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;
1052
+ .tds-input--auto-width input{
1053
+ field-sizing:content;
1054
+ inline-size:auto;
1055
+ }
830
1056
  }
831
1057
 
832
- .tds-sidenav-section-list,
833
- .tds-sidenav-item{
834
- width:100%;
835
- padding:0;
836
- margin:0;
1058
+ .tds-popover{
1059
+ max-inline-size:24rem;
1060
+ overflow:auto;
1061
+ overscroll-behavior:none;
1062
+ outline:0;
1063
+ scrollbar-color:#0004 var(--t-surface-color-card);
1064
+ scrollbar-width:thin;
1065
+ background:var(--t-surface-color-card);
1066
+ background-clip:padding-box;
1067
+ border:1px solid var(--t-border-color);
1068
+ border-radius:var(--t-border-radius);
1069
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
837
1070
  }
838
1071
 
839
- .tds-sidenav-item :is(a,button){
840
- 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;
852
- -webkit-appearance:none;
853
- -moz-appearance:none;
854
- 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);
860
- }
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;
1072
+ @media (prefers-reduced-motion: no-preference){
1073
+ .tds-popover[data-entering]{
1074
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
869
1075
  }
870
1076
 
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;
1077
+ .tds-popover[data-exiting]{
1078
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
875
1079
  }
876
1080
 
877
- :is(.tds-sidenav-item :is(a,button)):active{
878
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1081
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
1082
+ will-change:opacity, transform;
879
1083
  }
880
1084
 
881
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
882
- overflow:hidden;
883
- color:var(--tds-sidenav-item-icon-color);
1085
+ @keyframes tds-popover{
1086
+ from{
1087
+ opacity:0;
1088
+ transform:translateY(-8px);
884
1089
  }
1090
+ }
1091
+ }
885
1092
 
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;
894
- }
1093
+ .tds-popover-content{
1094
+ display:flex;
1095
+ flex-direction:column;
1096
+ padding:var(--t-spacing-1);
1097
+ outline:0;
1098
+ }
895
1099
 
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
- }
1100
+ .tds-radio{
1101
+ --tds-radio-font-size:var(--t-font-size-md);
1102
+ --tds-radio-cursor:pointer;
1103
+ --tds-radio-line-height:1.4;
1104
+ --tds-radio-transition-property:border-width;
901
1105
 
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);
1106
+ --tds-radio-input-size:var(--t-element-size-md);
1107
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1108
+ --tds-radio-input-border-color:var(--t-form-border-color);
1109
+ --tds-radio-input-border-width:var(--t-form-border-width);
1110
+ --tds-radio-input-background-color:var(--t-form-background-color);
905
1111
 
906
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
907
- font-weight:var(--t-font-weight-semibold);
908
- }
1112
+ --tds-radio-label-color:var(--t-form-color);
909
1113
 
910
- .tds-sidenav-item:has(.tds-sidenav-section){
911
- display:flex;
912
- flex-direction:column;
913
- gap:var(--t-spacing-half);
914
- }
915
-
916
- .tds-sidenav-item .tds-sidenav-section-list{
917
- --tds-sidenav-item-depth:1;
918
- gap:0;
919
- }
920
-
921
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
922
- visibility:hidden;
923
- block-size:0;
924
- overflow-y:clip;
925
- opacity:0;
926
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
927
- }
928
-
929
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
930
- --tds-sidenav-item-depth:2;
931
- }
932
-
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;
939
- }
940
-
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);
961
- }
962
-
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
- }
968
-
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
- }
973
-
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
- }
977
-
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);
981
- }
982
-
983
- .tds-sidenav-responsive-header{
984
- display:flex;
985
- gap:var(--t-spacing-2);
986
- align-items:center;
987
- width:100%;
988
- }
989
-
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;
1021
- }
1022
-
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
- }
1032
-
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
-
1041
- .tds-sidenav-collapse:not(:popover-open){
1042
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1043
- transition:var(--tds-sidenav-collapse-transition-exit);
1044
- }
1045
-
1046
- @starting-style{
1047
- .tds-sidenav-collapse:popover-open{
1048
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1049
- transform:var(--tds-sidenav-collapse-closed-transform);
1050
- }
1051
- }
1052
- }
1053
- @supports not selector(:popover-open){
1054
- .tds-sidenav-collapse.\:popover-open{
1055
- display:flex;
1056
- }
1057
-
1058
- .tds-sidenav-collapse:not(.\:popover-open){
1059
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1060
- transition:var(--tds-sidenav-collapse-transition-exit);
1061
- }
1062
- }
1063
- }
1064
-
1065
- @media (min-width: 720px){
1066
- .tds-sidenav-responsive-header{
1067
- display:none;
1068
- }
1069
- }
1070
-
1071
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1072
- display:none;
1073
- }
1074
-
1075
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1076
- display:block;
1077
- }
1078
-
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;
1114
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1115
+ --tds-radio-description-line-height:1.35;
1116
+ --tds-radio-description-color:var(--t-text-color-secondary);
1106
1117
 
1107
1118
  position:relative;
1108
1119
  display:inline-grid;
1109
1120
  grid-template-columns:auto;
1110
1121
  grid-auto-columns:1fr;
1111
1122
  gap:var(--t-spacing-fourth) 0;
1112
- line-height:var(--tds-checkbox-line-height);
1123
+ line-height:var(--tds-radio-line-height);
1113
1124
  -webkit-user-select:none;
1114
1125
  -moz-user-select:none;
1115
1126
  user-select:none;
1116
1127
  }
1117
1128
 
1118
- .tds-checkbox label{
1129
+ .tds-radio label{
1119
1130
  grid-area:1 / 2;
1120
1131
  padding-inline-start:var(--t-spacing-1);
1121
- font-size:var(--tds-checkbox-font-size);
1132
+ font-size:var(--tds-radio-font-size);
1122
1133
  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;
1134
+ color:var(--tds-radio-label-color);
1135
+ cursor:var(--tds-radio-cursor);
1129
1136
  }
1130
1137
 
1131
- .tds-checkbox input[type="checkbox"]{
1138
+ .tds-radio input[type="radio"]{
1132
1139
  position:relative;
1133
1140
  width:1em;
1134
1141
  height:1em;
1135
1142
  margin:calc((1lh - 1em) / 2) 0 0;
1136
- font-size:var(--tds-checkbox-font-size);
1143
+ font-size:var(--tds-radio-font-size);
1137
1144
  line-height:inherit;
1138
1145
  -webkit-appearance:none;
1139
1146
  -moz-appearance:none;
1140
1147
  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);
1148
+ cursor:var(--tds-radio-cursor);
1149
+ background-color:var(--tds-radio-input-background-color);
1150
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1151
+ border-radius:var(--tds-radio-input-border-radius);
1145
1152
  transition-timing-function:var(--t-ease-in-out);
1146
1153
  transition-duration:var(--t-duration-200);
1147
- transition-property:var(--tds-checkbox-transition-property);
1154
+ transition-property:var(--tds-radio-transition-property);
1148
1155
  }
1149
1156
 
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);
1157
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1158
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1159
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1173
1160
  }
1174
1161
 
1175
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1162
+ :is(.tds-radio input[type="radio"]):focus-visible{
1176
1163
  outline:var(--t-focus-ring-outline);
1177
1164
  outline-offset:var(--t-focus-ring-offset);
1178
1165
  }
1179
1166
 
1180
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1167
+ :is(.tds-radio input[type="radio"]):disabled{
1181
1168
  pointer-events:none;
1182
1169
  }
1183
1170
 
1184
1171
  @media (prefers-reduced-motion: reduce){
1185
1172
 
1186
- .tds-checkbox input[type="checkbox"]{
1187
- --tds-checkbox-transition-property:none;
1173
+ .tds-radio input[type="radio"]{
1174
+ --tds-radio-transition-property:none;
1188
1175
  }
1189
1176
  }
1190
1177
 
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;
1178
+ .tds-radio:has(input:checked){
1179
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1180
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1181
+ --tds-radio-input-border-width:4px;
1196
1182
  }
1197
1183
 
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);
1184
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1185
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1186
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1201
1187
  }
1202
1188
 
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;
1189
+ .tds-radio:has(input:user-invalid){
1190
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1215
1191
  }
1216
1192
 
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:"*";
1193
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1194
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1195
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1236
1196
  }
1237
1197
 
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);
1198
+ .tds-radio:has(input:disabled){
1199
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1200
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1241
1201
 
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;
1202
+ --tds-radio-label-color:var(--t-form-color-disabled);
1203
+ --tds-radio-description-color:var(--t-form-color-disabled);
1204
+ --tds-radio-cursor:not-allowed;
1245
1205
  }
1246
1206
 
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);
1207
+ .tds-radio:has(input:disabled) input:checked{
1208
+ --tds-radio-input-background-color:var(--t-form-background-color);
1209
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1249
1210
  }
1250
1211
 
1251
- .tds-checkbox-description{
1212
+ .tds-radio-description{
1252
1213
  display:flex;
1253
1214
  grid-area:2 / 2;
1254
1215
  gap:var(--t-spacing-half);
1255
1216
  align-items:flex-start;
1256
1217
  padding-inline-start:var(--t-spacing-1);
1257
1218
  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);
1219
+ font-size:var(--tds-radio-description-font-size);
1220
+ line-height:var(--tds-radio-description-line-height);
1221
+ color:var(--tds-radio-description-color);
1261
1222
  cursor:text;
1262
1223
  }
1263
1224
 
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
- }
1270
-
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;
1277
- }
1278
-
1279
-
1280
- :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{
1281
- -webkit-appearance:none;
1282
- appearance:none;
1283
- }
1284
-
1285
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1286
- inline-size:1em;
1287
- block-size:2em;
1288
- }
1289
-
1290
- [type="file"]:is(.tds-input input){
1291
- padding-block:var(--t-spacing-half);
1292
- padding-inline-start:var(--t-spacing-half);
1293
- }
1294
-
1295
- [type="file"]:is(.tds-input input):not(:disabled){
1296
- color:var(--t-text-color-secondary);
1297
- }
1298
-
1299
- [type="file"]:is(.tds-input input)::file-selector-button{
1300
- --_file-btn-padding-block:3px;
1301
-
1302
- padding-block:var(--_file-btn-padding-block);
1303
- padding-inline:12px;
1304
- margin-inline-end:12px;
1305
- font:inherit;
1306
- line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
1307
- color:var(--t-text-color-status-neutral);
1308
- cursor:pointer;
1309
- background-color:var(--t-fill-color-button-neutral-solid);
1310
- border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1311
- border-radius:var(--t-border-radius-md);
1312
- transition-timing-function:var(--t-ease-in-out);
1313
- transition-duration:var(--t-duration-200);
1314
- transition-property:color, background-color, border-color;
1315
- }
1316
-
1317
- [type="file"]:is(.tds-input input):hover::file-selector-button{
1318
- background-color:var(--t-fill-color-button-neutral-solid-hover);
1319
- border-color:var(--t-fill-color-button-neutral-solid-hover);
1320
- }
1321
-
1322
- [type="file"]:is(.tds-input input):active::file-selector-button{
1323
- background-color:var(--t-fill-color-button-neutral-solid-active);
1324
- border-color:var(--t-fill-color-button-neutral-solid-active);
1325
- }
1326
-
1327
- [type="file"]:is(.tds-input input):disabled::file-selector-button{
1328
- color:var(--t-text-color-disabled);
1329
- pointer-events:none;
1330
- background-color:var(--t-fill-color-button-neutral-solid-disabled);
1331
- border-color:var(--t-fill-color-button-neutral-solid-disabled);
1332
- }
1333
- @supports (field-sizing: content){
1334
- .tds-input--auto-width{
1335
- inline-size:-moz-fit-content;
1336
- inline-size:fit-content;
1337
- min-inline-size:min(100%, 122px);
1338
- }
1339
-
1340
- .tds-input--auto-width input{
1341
- field-sizing:content;
1342
- inline-size:auto;
1343
- }
1225
+ .tds-radio--sm{
1226
+ --tds-radio-line-height:1.35;
1227
+ --tds-radio-input-size:var(--t-element-size-sm);
1228
+ --tds-radio-font-size:var(--t-font-size-sm);
1229
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1230
+ --tds-radio-description-line-height:1.3;
1344
1231
  }
1345
1232
 
1346
1233
  .tds-modal-overlay{
@@ -1506,288 +1393,284 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1506
1393
  }
1507
1394
  }
1508
1395
 
1509
- .tds-radio{
1510
- --tds-radio-font-size:var(--t-font-size-md);
1511
- --tds-radio-cursor:pointer;
1512
- --tds-radio-line-height:1.4;
1513
- --tds-radio-transition-property:border-width;
1514
-
1515
- --tds-radio-input-size:var(--t-element-size-md);
1516
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1517
- --tds-radio-input-border-color:var(--t-form-border-color);
1518
- --tds-radio-input-border-width:var(--t-form-border-width);
1519
- --tds-radio-input-background-color:var(--t-form-background-color);
1520
-
1521
- --tds-radio-label-color:var(--t-form-color);
1522
-
1523
- --tds-radio-description-font-size:var(--t-font-size-sm);
1524
- --tds-radio-description-line-height:1.35;
1525
- --tds-radio-description-color:var(--t-text-color-secondary);
1526
-
1527
- position:relative;
1528
- display:inline-grid;
1529
- grid-template-columns:auto;
1530
- grid-auto-columns:1fr;
1531
- gap:var(--t-spacing-fourth) 0;
1532
- line-height:var(--tds-radio-line-height);
1533
- -webkit-user-select:none;
1534
- -moz-user-select:none;
1535
- user-select:none;
1396
+ .tds-input:has(textarea){
1397
+ --tds-input-padding-block:6px;
1398
+ --tds-input-resizer-size:var(--t-element-size-sm);
1399
+ --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");
1536
1400
  }
1537
1401
 
1538
- .tds-radio label{
1539
- grid-area:1 / 2;
1540
- padding-inline-start:var(--t-spacing-1);
1541
- font-size:var(--tds-radio-font-size);
1542
- font-weight:var(--t-font-weight-normal);
1543
- color:var(--tds-radio-label-color);
1544
- cursor:var(--tds-radio-cursor);
1545
- }
1402
+ @supports (x: attr(x type(*))){
1546
1403
 
1547
- .tds-radio input[type="radio"]{
1548
- position:relative;
1549
- width:1em;
1550
- height:1em;
1551
- margin:calc((1lh - 1em) / 2) 0 0;
1552
- font-size:var(--tds-radio-font-size);
1553
- line-height:inherit;
1554
- -webkit-appearance:none;
1555
- -moz-appearance:none;
1556
- appearance:none;
1557
- cursor:var(--tds-radio-cursor);
1558
- background-color:var(--tds-radio-input-background-color);
1559
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1560
- border-radius:var(--tds-radio-input-border-radius);
1561
- transition-timing-function:var(--t-ease-in-out);
1562
- transition-duration:var(--t-duration-200);
1563
- transition-property:var(--tds-radio-transition-property);
1404
+ .tds-input textarea{
1405
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1406
+ }
1564
1407
  }
1565
1408
 
1566
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1567
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1568
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1569
- }
1570
-
1571
- :is(.tds-radio input[type="radio"]):focus-visible{
1572
- outline:var(--t-focus-ring-outline);
1573
- outline-offset:var(--t-focus-ring-offset);
1409
+ .tds-input.tds-textarea--resize-vertical textarea{
1410
+ resize:vertical;
1574
1411
  }
1575
1412
 
1576
- :is(.tds-radio input[type="radio"]):disabled{
1577
- pointer-events:none;
1413
+ .tds-input.tds-textarea--resize-none textarea{
1414
+ resize:none;
1578
1415
  }
1579
1416
 
1580
- @media (prefers-reduced-motion: reduce){
1581
-
1582
- .tds-radio input[type="radio"]{
1583
- --tds-radio-transition-property:none;
1584
- }
1417
+ .tds-input.tds-textarea--resize-auto textarea{
1418
+ resize:vertical;
1585
1419
  }
1586
1420
 
1587
- .tds-radio:has(input:checked){
1588
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1589
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1590
- --tds-radio-input-border-width:4px;
1591
- }
1592
-
1593
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1594
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1595
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1421
+ @supports (field-sizing: content){
1422
+ .tds-input.tds-textarea--resize-auto textarea{
1423
+ field-sizing:content;
1424
+ resize:none;
1425
+ }
1596
1426
  }
1597
1427
 
1598
- .tds-radio:has(input:user-invalid){
1599
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1600
- }
1601
-
1602
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1603
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1604
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1428
+ .tds-input textarea{
1429
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1430
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1431
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1432
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1433
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1434
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1435
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1436
+ --tds-input-scrollbar-thumb-border-radius:999px;
1437
+ --tds-input-scrollbar-thumb-border-width:3px;
1438
+ --tds-input-scrollbar-track-margin-block:.125rem;
1439
+ scrollbar-color:initial;
1440
+ transition-timing-function:var(--t-ease-in-out);
1441
+ transition-duration:var(--t-duration-200);
1442
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1443
+ }
1444
+
1445
+ @media (pointer: fine){
1446
+ :is(.tds-input textarea)::-webkit-scrollbar{
1447
+ width:12px;
1448
+ height:12px;
1449
+ cursor:default;
1605
1450
  }
1606
1451
 
1607
- .tds-radio:has(input:disabled){
1608
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1609
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1452
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1453
+ cursor:default;
1454
+ background:var(--tds-input-scrollbar-thumb-color);
1455
+ background-clip:content-box;
1456
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1457
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1458
+ }
1610
1459
 
1611
- --tds-radio-label-color:var(--t-form-color-disabled);
1612
- --tds-radio-description-color:var(--t-form-color-disabled);
1613
- --tds-radio-cursor:not-allowed;
1460
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1461
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1462
+ }
1463
+
1464
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1465
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1466
+ }
1467
+
1468
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1469
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1470
+ }
1471
+
1472
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1473
+ background:var(--tds-input-scrollbar-surface-color);
1474
+ }
1475
+
1476
+ :is(.tds-input textarea)::-webkit-resizer{
1477
+ background:var(--tds-input-resizer-icon) no-repeat;
1478
+ background-position:right bottom;
1479
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1480
+ }
1481
+
1482
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1483
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1484
+ cursor:default;
1485
+ }
1486
+
1487
+ @supports (-moz-appearance: none){
1488
+ :is(.tds-input textarea){
1489
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1490
+ scrollbar-width:thin;
1491
+ }
1492
+
1493
+ @media (hover){
1494
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1495
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1496
+ }
1497
+ }
1498
+ }
1614
1499
  }
1615
1500
 
1616
- .tds-radio:has(input:disabled) input:checked{
1617
- --tds-radio-input-background-color:var(--t-form-background-color);
1618
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1501
+ .tds-toggle-switch{
1502
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1503
+ --tds-toggle-switch-cursor:pointer;
1504
+ --tds-toggle-switch-display:inline-grid;
1505
+ --tds-toggle-switch-line-height:1.4;
1506
+
1507
+ --tds-toggle-switch-label-color:var(--t-form-color);
1508
+
1509
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1510
+ --tds-toggle-switch-track-outline:none;
1511
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1512
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1513
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1514
+
1515
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1516
+ --tds-toggle-switch-thumb-transform:translateX(0);
1517
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1518
+
1519
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1520
+ --tds-toggle-switch-description-line-height:1.35;
1521
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1522
+ position:relative;
1523
+
1524
+ display:var(--tds-toggle-switch-display);
1525
+ grid-template-columns:auto;
1526
+ grid-auto-columns:1fr;
1527
+ gap:var(--t-spacing-fourth) 0;
1528
+ -webkit-user-select:none;
1529
+ -moz-user-select:none;
1530
+ user-select:none;
1531
+ }
1532
+
1533
+ .tds-toggle-switch input[type="checkbox"]{
1534
+ position:absolute;
1535
+ width:var(--tds-toggle-switch-track-width);
1536
+ height:var(--tds-toggle-switch-track-height);
1537
+ margin:0;
1538
+ -webkit-appearance:none;
1539
+ -moz-appearance:none;
1540
+ appearance:none;
1541
+ cursor:var(--tds-toggle-switch-cursor);
1542
+ outline:var(--tds-toggle-switch-track-outline);
1543
+ outline-offset:var(--t-focus-ring-offset);
1544
+ background-color:transparent;
1545
+ border:0;
1546
+ border-radius:var(--t-border-radius-round);
1547
+ }
1548
+
1549
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1550
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1619
1551
  }
1620
1552
 
1621
- .tds-radio-description{
1553
+ .tds-toggle-switch label{
1554
+ display:inline-flex;
1555
+ grid-area:1 / 2;
1556
+ padding-inline-start:var(--t-spacing-1);
1557
+ margin-top:-.09375em;
1558
+ font-size:var(--tds-toggle-switch-font-size);
1559
+ font-weight:var(--t-font-weight-normal);
1560
+ line-height:var(--tds-toggle-switch-line-height);
1561
+ color:var(--tds-toggle-switch-label-color);
1562
+ cursor:var(--tds-toggle-switch-cursor);
1563
+ }
1564
+
1565
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1566
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1567
+ }
1568
+
1569
+ .tds-toggle-switch:has(input:checked){
1570
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1571
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1572
+ }
1573
+
1574
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1575
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1576
+ }
1577
+
1578
+ .tds-toggle-switch:has(input:disabled){
1579
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1580
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1581
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1582
+ --tds-toggle-switch-cursor:not-allowed;
1583
+ }
1584
+
1585
+ .tds-toggle-switch-track{
1586
+ position:relative;
1587
+ flex-shrink:0;
1588
+ width:var(--tds-toggle-switch-track-width);
1589
+ height:var(--tds-toggle-switch-track-height);
1590
+ background-color:var(--tds-toggle-switch-track-background-color);
1591
+ border-radius:var(--t-border-radius-round);
1592
+ transition:var(--tds-toggle-switch-track-transition);
1593
+ }
1594
+
1595
+ .tds-toggle-switch-track::before{
1596
+ position:absolute;
1597
+ top:var(--t-spacing-fourth);
1598
+ left:var(--t-spacing-fourth);
1599
+ width:var(--tds-toggle-switch-thumb-size);
1600
+ height:var(--tds-toggle-switch-thumb-size);
1601
+ content:"";
1602
+ background-color:#fff;
1603
+ border-radius:var(--t-border-radius-round);
1604
+ transform:var(--tds-toggle-switch-thumb-transform);
1605
+ transition:var(--tds-toggle-switch-thumb-transition);
1606
+ }
1607
+
1608
+ @media (prefers-reduced-motion: reduce){
1609
+
1610
+ .tds-toggle-switch-track{
1611
+ --tds-toggle-switch-track-transition:none;
1612
+ --tds-toggle-switch-thumb-transition:none;
1613
+ }
1614
+ }
1615
+
1616
+ .tds-toggle-switch-description{
1622
1617
  display:flex;
1623
1618
  grid-area:2 / 2;
1624
- gap:var(--t-spacing-half);
1625
1619
  align-items:flex-start;
1626
1620
  padding-inline-start:var(--t-spacing-1);
1627
1621
  margin:0;
1628
- font-size:var(--tds-radio-description-font-size);
1629
- line-height:var(--tds-radio-description-line-height);
1630
- color:var(--tds-radio-description-color);
1622
+ font-size:var(--tds-toggle-switch-description-font-size);
1623
+ line-height:var(--tds-toggle-switch-description-line-height);
1624
+ color:var(--tds-toggle-switch-description-color);
1631
1625
  cursor:text;
1632
1626
  }
1633
1627
 
1634
- .tds-radio--sm{
1635
- --tds-radio-line-height:1.35;
1636
- --tds-radio-input-size:var(--t-element-size-sm);
1637
- --tds-radio-font-size:var(--t-font-size-sm);
1638
- --tds-radio-description-font-size:var(--t-font-size-xs);
1639
- --tds-radio-description-line-height:1.3;
1628
+ .tds-toggle-switch--sm{
1629
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1630
+ --tds-toggle-switch-line-height:1.35;
1631
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1632
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1633
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1634
+ --tds-toggle-switch-description-line-height:1.3;
1640
1635
  }
1641
1636
 
1642
- .tds-checkbox-group{
1643
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1644
- --tds-checkbox-group-line-height:1.4;
1645
- --tds-checkbox-group-gap:var(--t-spacing-1);
1637
+ .tds-toggle-switch--hide-label{
1638
+ --tds-toggle-switch-display:inline-flex;
1639
+ }
1646
1640
 
1647
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1648
- --tds-checkbox-group-description-line-height:1.35;
1649
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1650
- --tds-checkbox-group-description-invalid-icon-display:none;
1641
+ .tds-radio-group{
1642
+ --tds-radio-group-font-size:var(--t-font-size-md);
1643
+ --tds-radio-group-line-height:1.4;
1644
+ --tds-radio-group-gap:var(--t-spacing-1);
1645
+
1646
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1647
+ --tds-radio-group-description-line-height:1.35;
1648
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1649
+ --tds-radio-group-description-invalid-icon-display:none;
1651
1650
  display:flex;
1652
1651
  flex-direction:column;
1653
1652
  gap:0;
1654
1653
  padding:0;
1655
1654
  margin:0;
1656
1655
 
1657
- font-size:var(--tds-checkbox-group-font-size);
1658
- line-height:var(--tds-checkbox-group-line-height);
1656
+ font-size:var(--tds-radio-group-font-size);
1657
+ line-height:var(--tds-radio-group-line-height);
1659
1658
  border:0;
1660
1659
  }
1661
1660
 
1662
- .tds-checkbox-group legend{
1661
+ .tds-radio-group legend{
1663
1662
  float:left;
1664
1663
  padding:0;
1665
1664
  margin:0;
1666
1665
  }
1667
1666
 
1668
- .tds-checkbox-group[aria-invalid="true"]{
1669
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1670
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1667
+ .tds-radio-group[aria-invalid="true"]{
1668
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1669
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1671
1670
  }
1672
1671
 
1673
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1674
- margin-left:.25ch;
1675
- color:var(--t-text-color-status-error);
1676
- content:"*";
1677
- }
1678
-
1679
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1680
- content:none;
1681
- }
1682
-
1683
- .tds-checkbox-group-fields{
1684
- display:flex;
1685
- flex-direction:column;
1686
- gap:var(--tds-checkbox-group-gap);
1687
- align-items:flex-start;
1688
- margin-top:var(--t-spacing-1);
1689
- }
1690
-
1691
- .tds-checkbox-group-description{
1692
- display:flex;
1693
- gap:var(--t-spacing-half);
1694
- align-items:flex-start;
1695
- margin:var(--t-spacing-fourth) 0 0;
1696
- font-size:var(--tds-checkbox-group-description-font-size);
1697
- line-height:var(--tds-checkbox-group-description-line-height);
1698
- color:var(--tds-checkbox-group-description-color);
1699
- cursor:text;
1700
- }
1701
-
1702
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1703
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1704
- flex-shrink:0;
1705
- margin-top:calc(.5lh - .5em);
1706
- line-height:var(--tds-checkbox-group-description-line-height);
1707
- }
1708
-
1709
- .tds-checkbox-group--sm{
1710
- --tds-checkbox-group-line-height:1.35;
1711
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1712
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1713
- --tds-checkbox-group-description-line-height:1.3;
1714
- }
1715
-
1716
- .tds-popover{
1717
- max-inline-size:24rem;
1718
- overflow:auto;
1719
- overscroll-behavior:none;
1720
- outline:0;
1721
- scrollbar-color:#0004 var(--t-surface-color-card);
1722
- scrollbar-width:thin;
1723
- background:var(--t-surface-color-card);
1724
- background-clip:padding-box;
1725
- border:1px solid var(--t-border-color);
1726
- border-radius:var(--t-border-radius);
1727
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1728
- }
1729
-
1730
- @media (prefers-reduced-motion: no-preference){
1731
- .tds-popover[data-entering]{
1732
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1733
- }
1734
-
1735
- .tds-popover[data-exiting]{
1736
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1737
- }
1738
-
1739
- .tds-popover[data-entering],.tds-popover[data-exiting]{
1740
- will-change:opacity, transform;
1741
- }
1742
-
1743
- @keyframes tds-popover{
1744
- from{
1745
- opacity:0;
1746
- transform:translateY(-8px);
1747
- }
1748
- }
1749
- }
1750
-
1751
- .tds-popover-content{
1752
- display:flex;
1753
- flex-direction:column;
1754
- padding:var(--t-spacing-1);
1755
- outline:0;
1756
- }
1757
-
1758
- .tds-radio-group{
1759
- --tds-radio-group-font-size:var(--t-font-size-md);
1760
- --tds-radio-group-line-height:1.4;
1761
- --tds-radio-group-gap:var(--t-spacing-1);
1762
-
1763
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1764
- --tds-radio-group-description-line-height:1.35;
1765
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1766
- --tds-radio-group-description-invalid-icon-display:none;
1767
- display:flex;
1768
- flex-direction:column;
1769
- gap:0;
1770
- padding:0;
1771
- margin:0;
1772
-
1773
- font-size:var(--tds-radio-group-font-size);
1774
- line-height:var(--tds-radio-group-line-height);
1775
- border:0;
1776
- }
1777
-
1778
- .tds-radio-group legend{
1779
- float:left;
1780
- padding:0;
1781
- margin:0;
1782
- }
1783
-
1784
- .tds-radio-group[aria-invalid="true"]{
1785
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1786
- --tds-radio-group-description-invalid-icon-display:inline-block;
1787
- }
1788
-
1789
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1790
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1672
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1673
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1791
1674
  }
1792
1675
 
1793
1676
  :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
@@ -1838,528 +1721,645 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1838
1721
  --tds-radio-group-description-line-height:1.3;
1839
1722
  }
1840
1723
 
1841
- .tds-toggle-switch{
1842
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1843
- --tds-toggle-switch-cursor:pointer;
1844
- --tds-toggle-switch-display:inline-grid;
1845
- --tds-toggle-switch-line-height:1.4;
1724
+ @layer t-critical{
1725
+ tds-page-header:not(.hydrated){
1726
+ display:none;
1727
+ }
1728
+ }
1846
1729
 
1847
- --tds-toggle-switch-label-color:var(--t-form-color);
1730
+ @layer t-component{
1731
+ .tds-page-header{
1732
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1733
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1734
+ --tds-page-header-color:var(--t-text-color);
1735
+ --tds-page-header-bottom-border-color:transparent;
1736
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1737
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1738
+ --tds-page-header-padding-x:var(--t-spacing-2);
1739
+ --tds-page-header-padding-y:var(--t-spacing-2);
1740
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1741
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1742
+ --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%);
1743
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1744
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1745
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1746
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1747
+ --tds-page-header-nav-item-border-width:1px;
1848
1748
 
1849
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1850
- --tds-toggle-switch-track-outline:none;
1851
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1852
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1853
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1749
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1750
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1854
1751
 
1855
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1856
- --tds-toggle-switch-thumb-transform:translateX(0);
1857
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1752
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1753
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1754
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1858
1755
 
1859
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1860
- --tds-toggle-switch-description-line-height:1.35;
1861
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1862
- position:relative;
1756
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1757
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1863
1758
 
1864
- display:var(--tds-toggle-switch-display);
1865
- grid-template-columns:auto;
1866
- grid-auto-columns:1fr;
1867
- gap:var(--t-spacing-fourth) 0;
1868
- -webkit-user-select:none;
1869
- -moz-user-select:none;
1870
- user-select:none;
1871
- }
1759
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1760
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1761
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1872
1762
 
1873
- .tds-toggle-switch input[type="checkbox"]{
1874
- position:absolute;
1875
- width:var(--tds-toggle-switch-track-width);
1876
- height:var(--tds-toggle-switch-track-height);
1877
- margin:0;
1878
- -webkit-appearance:none;
1879
- -moz-appearance:none;
1880
- appearance:none;
1881
- cursor:var(--tds-toggle-switch-cursor);
1882
- outline:var(--tds-toggle-switch-track-outline);
1883
- outline-offset:var(--t-focus-ring-offset);
1884
- background-color:transparent;
1885
- border:0;
1886
- border-radius:var(--t-border-radius-round);
1763
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1764
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1765
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1766
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1767
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1887
1768
  }
1888
1769
 
1889
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1890
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1891
- }
1892
-
1893
- .tds-toggle-switch label{
1894
- display:inline-flex;
1895
- grid-area:1 / 2;
1896
- padding-inline-start:var(--t-spacing-1);
1897
- margin-top:-.09375em;
1898
- font-size:var(--tds-toggle-switch-font-size);
1899
- font-weight:var(--t-font-weight-normal);
1900
- line-height:var(--tds-toggle-switch-line-height);
1901
- color:var(--tds-toggle-switch-label-color);
1902
- cursor:var(--tds-toggle-switch-cursor);
1770
+ .tds-page-header--profile{
1771
+ --tds-page-header-padding-y:20px;
1903
1772
  }
1904
1773
 
1905
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1906
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1774
+ @supports (color: light-dark(#fff, #000)){
1775
+ .tds-page-header{
1776
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1777
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1778
+ }
1907
1779
  }
1908
1780
 
1909
- .tds-toggle-switch:has(input:checked){
1910
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1911
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1781
+ @media (min-width: 600px){
1782
+ .tds-page-header{
1783
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1784
+ --tds-page-header-color:var(--t-text-color-secondary);
1785
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1786
+ --tds-page-header-padding-x:var(--t-spacing-3);
1787
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1788
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1789
+ --tds-page-header-nav-background:transparent;
1790
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1791
+ --tds-page-header-nav-item-border-width:1px;
1792
+ --tds-page-header-nav-item-color:var(--t-text-color);
1793
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1794
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1795
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1796
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1797
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1798
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1799
+ }
1912
1800
  }
1801
+ }
1913
1802
 
1914
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1915
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1916
- }
1803
+ .tds-page-header{
1804
+ display:flex;
1805
+ flex-direction:column;
1806
+ padding-top:var(--tds-page-header-padding-y);
1807
+ color:var(--tds-page-header-color);
1808
+ background:var(--tds-page-header-background-color);
1809
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1810
+ }
1917
1811
 
1918
- .tds-toggle-switch:has(input:disabled){
1919
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1920
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1921
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1922
- --tds-toggle-switch-cursor:not-allowed;
1812
+ .tds-page-header:not(.has-nav){
1813
+ padding-bottom:var(--tds-page-header-padding-y);
1923
1814
  }
1924
1815
 
1925
- .tds-toggle-switch-track{
1926
- position:relative;
1927
- flex-shrink:0;
1928
- width:var(--tds-toggle-switch-track-width);
1929
- height:var(--tds-toggle-switch-track-height);
1930
- background-color:var(--tds-toggle-switch-track-background-color);
1931
- border-radius:var(--t-border-radius-round);
1932
- transition:var(--tds-toggle-switch-track-transition);
1933
- }
1934
-
1935
- .tds-toggle-switch-track::before{
1936
- position:absolute;
1937
- top:var(--t-spacing-fourth);
1938
- left:var(--t-spacing-fourth);
1939
- width:var(--tds-toggle-switch-thumb-size);
1940
- height:var(--tds-toggle-switch-thumb-size);
1941
- content:"";
1942
- background-color:#fff;
1943
- border-radius:var(--t-border-radius-round);
1944
- transform:var(--tds-toggle-switch-thumb-transform);
1945
- transition:var(--tds-toggle-switch-thumb-transition);
1816
+ .tds-page-header.inactive{
1817
+ background:var(--tds-page-header-background-color-inactive);
1946
1818
  }
1947
1819
 
1948
- @media (prefers-reduced-motion: reduce){
1949
-
1950
- .tds-toggle-switch-track{
1951
- --tds-toggle-switch-track-transition:none;
1952
- --tds-toggle-switch-thumb-transition:none;
1953
- }
1820
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1821
+ width:100%;
1954
1822
  }
1955
1823
 
1956
- .tds-toggle-switch-description{
1957
- display:flex;
1958
- grid-area:2 / 2;
1959
- align-items:flex-start;
1960
- padding-inline-start:var(--t-spacing-1);
1961
- margin:0;
1962
- font-size:var(--tds-toggle-switch-description-font-size);
1963
- line-height:var(--tds-toggle-switch-description-line-height);
1964
- color:var(--tds-toggle-switch-description-color);
1965
- cursor:text;
1966
- }
1824
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1825
+ display:flex;
1826
+ flex-flow:row wrap;
1827
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1828
+ align-items:flex-start;
1829
+ justify-content:flex-start;
1830
+ min-width:0;
1831
+ }
1967
1832
 
1968
- .tds-toggle-switch--sm{
1969
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1970
- --tds-toggle-switch-line-height:1.35;
1971
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1972
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1973
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1974
- --tds-toggle-switch-description-line-height:1.3;
1975
- }
1833
+ :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{
1834
+ display:flex;
1835
+ gap:var(--tds-page-header-nav-gap);
1836
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1837
+ margin:0 0 -1px;
1838
+ overflow:auto;
1839
+ list-style:none;
1840
+ background:var(--tds-page-header-nav-background);
1841
+ }
1976
1842
 
1977
- .tds-toggle-switch--hide-label{
1978
- --tds-toggle-switch-display:inline-flex;
1979
- }
1843
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1844
+ position:relative;
1845
+ display:inline-flex;
1846
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1847
+ font-size:var(--t-font-size-sm);
1848
+ line-height:22px;
1849
+ color:var(--tds-page-header-nav-item-color);
1850
+ white-space:nowrap;
1851
+ text-decoration:none;
1852
+ -webkit-appearance:none;
1853
+ -moz-appearance:none;
1854
+ appearance:none;
1855
+ cursor:pointer;
1856
+ outline-offset:-2px;
1857
+ background-color:var(--tds-page-header-nav-item-background-color);
1858
+ background-clip:padding-box;
1859
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1860
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1861
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1862
+ }
1980
1863
 
1981
- .tds-input:has(textarea){
1982
- --tds-input-padding-block:6px;
1983
- --tds-input-resizer-size:var(--t-element-size-sm);
1984
- --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");
1985
- }
1864
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1865
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1866
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1867
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1868
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1869
+ }
1986
1870
 
1987
- @supports (x: attr(x type(*))){
1871
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1872
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1873
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1874
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1875
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1876
+ }
1988
1877
 
1989
- .tds-input textarea{
1990
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1991
- }
1992
- }
1878
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1879
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1880
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1881
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1882
+ }
1993
1883
 
1994
- .tds-input.tds-textarea--resize-vertical textarea{
1995
- resize:vertical;
1996
- }
1884
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1885
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1886
+ color:var(--tds-page-header-nav-item-color-disabled);
1887
+ cursor:not-allowed;
1888
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1889
+ opacity:1;
1890
+ }
1997
1891
 
1998
- .tds-input.tds-textarea--resize-none textarea{
1999
- resize:none;
2000
- }
1892
+ @media (min-width: 600px){
1893
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1894
+ position:absolute;
1895
+ inset:auto -1px -1px;
1896
+ height:1px;
1897
+ pointer-events:none;
1898
+ content:"";
1899
+ background-color:var(--tds-page-header-bottom-border-color);
1900
+ }
1901
+ }
2001
1902
 
2002
- .tds-input.tds-textarea--resize-auto textarea{
2003
- resize:vertical;
1903
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1904
+ position:relative;
2004
1905
  }
2005
1906
 
2006
- @supports (field-sizing: content){
2007
- .tds-input.tds-textarea--resize-auto textarea{
2008
- field-sizing:content;
2009
- resize:none;
1907
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1908
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1909
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2010
1910
  }
2011
- }
2012
-
2013
- .tds-input textarea{
2014
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2015
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2016
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2017
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2018
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2019
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2020
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2021
- --tds-input-scrollbar-thumb-border-radius:999px;
2022
- --tds-input-scrollbar-thumb-border-width:3px;
2023
- --tds-input-scrollbar-track-margin-block:.125rem;
2024
- scrollbar-color:initial;
2025
- transition-timing-function:var(--t-ease-in-out);
2026
- transition-duration:var(--t-duration-200);
2027
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2028
- }
2029
1911
 
2030
- @media (pointer: fine){
2031
- :is(.tds-input textarea)::-webkit-scrollbar{
2032
- width:12px;
2033
- height:12px;
2034
- cursor:default;
2035
- }
1912
+ :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{
1913
+ position:absolute;
1914
+ top:-5px;
1915
+ right:-2px;
1916
+ width:10px;
1917
+ height:10px;
1918
+ content:"";
1919
+ background:var(--tds-page-header-nav-item-indicator-color);
1920
+ border-radius:50%;
1921
+ }
2036
1922
 
2037
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2038
- cursor:default;
2039
- background:var(--tds-input-scrollbar-thumb-color);
2040
- background-clip:content-box;
2041
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2042
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2043
- }
1923
+ @media (prefers-reduced-motion: no-preference){
1924
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1925
+ animation:indicator-pulse 1.25s ease infinite;
1926
+ }
1927
+ }
2044
1928
 
2045
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2046
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2047
- }
1929
+ .tds-page-header__title-bar{
1930
+ display:flex;
1931
+ flex-direction:column;
1932
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1933
+ align-items:flex-start;
1934
+ justify-content:space-between;
1935
+ padding:0 var(--tds-page-header-padding-x);
1936
+ }
2048
1937
 
2049
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2050
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2051
- }
1938
+ .tds-page-header--profile > .tds-page-header__title-bar{
1939
+ align-items:center;
1940
+ }
2052
1941
 
2053
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2054
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2055
- }
1942
+ .tds-page-header__primary{
1943
+ width:100%;
1944
+ }
2056
1945
 
2057
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2058
- background:var(--tds-input-scrollbar-surface-color);
2059
- }
1946
+ .tds-page-header__primary h1{
1947
+ margin:0;
1948
+ font-size:var(--tds-page-header-headline-font-size);
1949
+ font-weight:var(--t-font-weight-normal);
1950
+ line-height:32px;
1951
+ color:var(--tds-page-header-headline-color);
1952
+ overflow-wrap:break-word;
1953
+ }
2060
1954
 
2061
- :is(.tds-input textarea)::-webkit-resizer{
2062
- background:var(--tds-input-resizer-icon) no-repeat;
2063
- background-position:right bottom;
2064
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2065
- }
1955
+ @media (min-width: 960px){
1956
+ .tds-page-header__primary{
1957
+ flex:1 1 max-content;
1958
+ width:auto;
1959
+ min-width:0;
1960
+ max-width:100%;
1961
+ }
2066
1962
 
2067
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2068
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2069
- cursor:default;
1963
+ .tds-page-header__title-bar,
1964
+ .tds-page-header--profile .tds-page-header__title-bar{
1965
+ flex-flow:row nowrap;
1966
+ row-gap:12px;
1967
+ align-items:flex-start;
1968
+ }
1969
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1970
+ width:auto;
2070
1971
  }
2071
1972
 
2072
- @supports (-moz-appearance: none){
2073
- :is(.tds-input textarea){
2074
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2075
- scrollbar-width:thin;
2076
- }
2077
-
2078
- @media (hover){
2079
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2080
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2081
- }
2082
- }
1973
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1974
+ justify-content:flex-end;
2083
1975
  }
1976
+ }
1977
+
1978
+ .tds-page-header-phone,
1979
+ .tds-page-header-email{
1980
+ color:var(--tds-page-header-color);
1981
+ white-space:nowrap;
1982
+ }
1983
+ .tds-page-header-email{
1984
+ max-width:100%;
1985
+ overflow:hidden;
1986
+ text-overflow:ellipsis;
1987
+ }
1988
+
1989
+ @keyframes indicator-pulse{
1990
+ 0%{
1991
+ opacity:.3;
1992
+ transform:scale(.9);
2084
1993
  }
2085
1994
 
2086
- @layer t-critical{
2087
- tds-page-header:not(.hydrated){
2088
- display:none;
1995
+ 100%{
1996
+ opacity:0;
1997
+ transform:scale(1.75);
2089
1998
  }
2090
1999
  }
2091
2000
 
2092
- @layer t-component{
2093
- .tds-page-header{
2094
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2095
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2096
- --tds-page-header-color:var(--t-text-color);
2097
- --tds-page-header-bottom-border-color:transparent;
2098
- --tds-page-header-headline-color:var(--t-text-color-headline);
2099
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2100
- --tds-page-header-padding-x:var(--t-spacing-2);
2101
- --tds-page-header-padding-y:var(--t-spacing-2);
2102
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2103
- --tds-page-header-nav-gap:var(--t-spacing-1);
2104
- --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%);
2105
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2106
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2107
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2108
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2109
- --tds-page-header-nav-item-border-width:1px;
2110
2001
 
2111
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2112
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2002
+ @media (prefers-reduced-motion: no-preference){
2113
2003
 
2114
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
2115
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2116
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2004
+ :root{
2005
+ interpolate-size:allow-keywords;
2006
+ }
2007
+ }
2117
2008
 
2118
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2119
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2009
+ @layer tds-component{
2010
+ tds-sidenav,
2011
+ .tds-sidenav{
2012
+ --tds-sidenav-indent:12px;
2013
+ --tds-sidenav-item-depth:0;
2120
2014
 
2121
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2122
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2123
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2015
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2124
2016
 
2125
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
2126
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2127
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2128
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2129
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2130
- }
2017
+ --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;
2018
+ --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;
2019
+ --tds-sidenav-collapse-closed-opacity:0;
2020
+ --tds-sidenav-collapse-open-opacity:1;
2021
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
2022
+ --tds-sidenav-collapse-open-transform:translateY(0);
2131
2023
 
2132
- .tds-page-header--profile{
2133
- --tds-page-header-padding-y:20px;
2024
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
2025
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
2026
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
2027
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
2028
+
2029
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
2030
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
2031
+ --tds-sidenav-item-nested-background-selected:transparent;
2032
+
2033
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
2034
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2035
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
2036
+
2037
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2038
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2134
2039
  }
2135
2040
 
2136
- @supports (color: light-dark(#fff, #000)){
2137
- .tds-page-header{
2138
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2139
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2041
+ @media (prefers-reduced-motion: reduce){
2042
+ tds-sidenav,
2043
+ .tds-sidenav{
2044
+ --tds-sidenav-collapse-transition-enter:none;
2045
+ --tds-sidenav-collapse-transition-exit:none;
2046
+ --tds-sidenav-collapse-closed-transform:none;
2047
+ --tds-sidenav-collapse-open-transform:none;
2048
+ }
2140
2049
  }
2050
+
2051
+ .tds-sidenav--theme-gray{
2052
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
2053
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
2054
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
2055
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2056
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
2141
2057
  }
2058
+ }
2142
2059
 
2143
- @media (min-width: 600px){
2144
- .tds-page-header{
2145
- --tds-page-header-background-color:var(--t-surface-color-canvas);
2146
- --tds-page-header-color:var(--t-text-color-secondary);
2147
- --tds-page-header-bottom-border-color:var(--t-border-color);
2148
- --tds-page-header-padding-x:var(--t-spacing-3);
2149
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2150
- --tds-page-header-nav-gap:var(--t-spacing-half);
2151
- --tds-page-header-nav-background:transparent;
2152
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2153
- --tds-page-header-nav-item-border-width:1px;
2154
- --tds-page-header-nav-item-color:var(--t-text-color);
2155
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2156
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2157
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2158
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2159
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2160
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2161
- }
2060
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2061
+ display:flex;
2062
+ }
2063
+
2064
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
2065
+ flex-direction:column;
2066
+ gap:var(--t-spacing-half);
2067
+ width:100%;
2162
2068
  }
2069
+
2070
+ .tds-sidenav-section-list{
2071
+ width:100%;
2072
+ padding:0;
2073
+ margin:0;
2074
+ list-style:none;
2163
2075
  }
2164
2076
 
2165
- .tds-page-header{
2077
+ .tds-sidenav-section-header{
2166
2078
  display:flex;
2167
- flex-direction:column;
2168
- padding-top:var(--tds-page-header-padding-y);
2169
- color:var(--tds-page-header-color);
2170
- background:var(--tds-page-header-background-color);
2171
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2079
+ align-items:baseline;
2080
+ justify-content:space-between;
2081
+ padding-top:var(--t-spacing-2);
2172
2082
  }
2173
2083
 
2174
- .tds-page-header:not(.has-nav){
2175
- padding-bottom:var(--tds-page-header-padding-y);
2084
+ .tds-sidenav-section-header h2{
2085
+ margin:0;
2086
+ font-size:var(--t-font-size-sm);
2087
+ font-weight:var(--t-font-weight-semibold);
2088
+ line-height:1.35;
2089
+ color:var(--t-text-color-secondary);
2090
+ text-transform:uppercase;
2176
2091
  }
2177
2092
 
2178
- .tds-page-header.inactive{
2179
- background:var(--tds-page-header-background-color-inactive);
2093
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2094
+ padding-top:0;
2180
2095
  }
2181
2096
 
2182
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2183
- width:100%;
2097
+ .tds-sidenav-section-header [slot="label-actions"]{
2098
+ display:flex;
2099
+ gap:var(--t-spacing-half);
2100
+ align-items:center;
2184
2101
  }
2185
2102
 
2186
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2103
+ .tds-sidenav-section [slot="section-actions"]{
2104
+ display:flex;
2105
+ gap:12px;
2106
+ align-items:center;
2107
+ min-height:42px;
2108
+ padding:var(--t-spacing-1) 0;
2109
+ }
2110
+
2111
+ .tds-sidenav-section-list,
2112
+ .tds-sidenav-item{
2113
+ width:100%;
2114
+ padding:0;
2115
+ margin:0;
2116
+ }
2117
+
2118
+ .tds-sidenav-item :is(a,button){
2119
+ position:relative;
2187
2120
  display:flex;
2188
- flex-flow:row wrap;
2189
- gap:var(--t-spacing-half) var(--t-spacing-1);
2190
- align-items:flex-start;
2191
- justify-content:flex-start;
2192
- min-width:0;
2121
+ gap:12px;
2122
+ align-items:center;
2123
+ width:100%;
2124
+ padding:12px;
2125
+ overflow:hidden;
2126
+ font-size:var(--t-font-size-sm);
2127
+ line-height:18px;
2128
+ color:var(--t-text-color-headline);
2129
+ white-space:nowrap;
2130
+ text-decoration:none;
2131
+ -webkit-appearance:none;
2132
+ -moz-appearance:none;
2133
+ appearance:none;
2134
+ cursor:pointer;
2135
+ background-color:var(--tds-sidenav-item-background, transparent);
2136
+ border:0;
2137
+ border-radius:var(--t-border-radius);
2138
+ transition:var(--tds-sidenav-item-transition);
2193
2139
  }
2194
2140
 
2195
- :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{
2196
- display:flex;
2197
- gap:var(--tds-page-header-nav-gap);
2198
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2199
- margin:0 0 -1px;
2200
- overflow:auto;
2201
- list-style:none;
2202
- background:var(--tds-page-header-nav-background);
2141
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2142
+ display:block;
2143
+ flex:1;
2144
+ overflow:hidden;
2145
+ text-overflow:ellipsis;
2146
+ text-align:left;
2147
+ white-space:nowrap;
2203
2148
  }
2204
2149
 
2205
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2206
- position:relative;
2207
- display:inline-flex;
2208
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2209
- font-size:var(--t-font-size-sm);
2210
- line-height:22px;
2211
- color:var(--tds-page-header-nav-item-color);
2212
- white-space:nowrap;
2150
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2151
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2152
+ color:var(--t-text-color-headline);
2213
2153
  text-decoration:none;
2214
- -webkit-appearance:none;
2215
- -moz-appearance:none;
2216
- appearance:none;
2217
- cursor:pointer;
2218
- outline-offset:-2px;
2219
- background-color:var(--tds-page-header-nav-item-background-color);
2220
- background-clip:padding-box;
2221
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2222
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2223
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2224
2154
  }
2225
2155
 
2226
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2227
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2228
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2229
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2230
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2156
+ :is(.tds-sidenav-item :is(a,button)):active{
2157
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2158
+ }
2159
+
2160
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2161
+ overflow:hidden;
2162
+ color:var(--tds-sidenav-item-icon-color);
2163
+ }
2164
+
2165
+ :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{
2166
+ display:block;
2167
+ width:var(--tds-sidenav-item-icon-size);
2168
+ height:var(--tds-sidenav-item-icon-size);
2231
2169
  }
2232
2170
 
2233
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2234
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2235
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2236
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2237
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2238
- }
2171
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2172
+ --tds-sidenav-indent:19px;
2173
+ }
2239
2174
 
2240
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2241
- background-color:var(--tds-page-header-nav-item-background-color-active);
2242
- border-color:var(--tds-page-header-nav-item-border-color-active);
2243
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2244
- }
2175
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2176
+ visibility:visible;
2177
+ block-size:auto;
2178
+ opacity:1;
2179
+ }
2245
2180
 
2246
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2247
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2248
- color:var(--tds-page-header-nav-item-color-disabled);
2249
- cursor:not-allowed;
2250
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
2251
- opacity:1;
2252
- }
2181
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2182
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2183
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2253
2184
 
2254
- @media (min-width: 600px){
2255
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2256
- position:absolute;
2257
- inset:auto -1px -1px;
2258
- height:1px;
2259
- pointer-events:none;
2260
- content:"";
2261
- background-color:var(--tds-page-header-bottom-border-color);
2262
- }
2263
- }
2185
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2186
+ font-weight:var(--t-font-weight-semibold);
2187
+ }
2264
2188
 
2265
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2266
- position:relative;
2189
+ .tds-sidenav-item:has(.tds-sidenav-section){
2190
+ display:flex;
2191
+ flex-direction:column;
2192
+ gap:var(--t-spacing-half);
2193
+ }
2194
+
2195
+ .tds-sidenav-item .tds-sidenav-section-list{
2196
+ --tds-sidenav-item-depth:1;
2197
+ gap:0;
2198
+ }
2199
+
2200
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2201
+ visibility:hidden;
2202
+ block-size:0;
2203
+ overflow-y:clip;
2204
+ opacity:0;
2205
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2267
2206
  }
2268
2207
 
2269
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2270
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2271
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2208
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2209
+ --tds-sidenav-item-depth:2;
2210
+ }
2211
+
2212
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2213
+ min-height:var(--t-element-size-2xl);
2214
+ padding-block:9px;
2215
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2216
+ line-height:1;
2217
+ background-color:transparent;
2218
+ }
2219
+
2220
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2221
+ position:absolute;
2222
+ top:0;
2223
+ bottom:0;
2224
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2225
+ width:2px;
2226
+ content:"";
2227
+ background-color:var(--tds-sidenav-item-nested-border-color);
2228
+ transition:var(--tds-sidenav-item-transition);
2272
2229
  }
2273
2230
 
2274
- :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{
2231
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2275
2232
  position:absolute;
2276
- top:-5px;
2277
- right:-2px;
2278
- width:10px;
2279
- height:10px;
2233
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2234
+ z-index:-1;
2235
+ height:100%;
2280
2236
  content:"";
2281
- background:var(--tds-page-header-nav-item-indicator-color);
2282
- border-radius:50%;
2237
+ background-color:var(--tds-sidenav-item-nested-background);
2238
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2239
+ transition:var(--tds-sidenav-item-transition);
2283
2240
  }
2284
2241
 
2285
- @media (prefers-reduced-motion: no-preference){
2286
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2287
- animation:indicator-pulse 1.25s ease infinite;
2288
- }
2242
+ :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)){
2243
+ display:block;
2244
+ text-align:left;
2245
+ white-space:normal;
2289
2246
  }
2290
2247
 
2291
- .tds-page-header__title-bar{
2292
- display:flex;
2293
- flex-direction:column;
2294
- gap:var(--t-spacing-2) var(--t-spacing-1);
2295
- align-items:flex-start;
2296
- justify-content:space-between;
2297
- padding:0 var(--tds-page-header-padding-x);
2298
- }
2248
+ :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{
2249
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2250
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2251
+ }
2299
2252
 
2300
- .tds-page-header--profile > .tds-page-header__title-bar{
2301
- align-items:center;
2302
- }
2253
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2254
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2255
+ }
2303
2256
 
2304
- .tds-page-header__primary{
2257
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2258
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2259
+ font-weight:var(--t-font-weight-medium);
2260
+ }
2261
+
2262
+ .tds-sidenav-responsive-header{
2263
+ display:flex;
2264
+ gap:var(--t-spacing-2);
2265
+ align-items:center;
2305
2266
  width:100%;
2306
2267
  }
2307
2268
 
2308
- .tds-page-header__primary h1{
2269
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2270
+ order:0;
2271
+ }
2272
+
2273
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2274
+ flex:1;
2275
+ order:1;
2309
2276
  margin:0;
2310
- font-size:var(--tds-page-header-headline-font-size);
2311
- font-weight:var(--t-font-weight-normal);
2312
- line-height:32px;
2313
- color:var(--tds-page-header-headline-color);
2314
- overflow-wrap:break-word;
2277
+ font-size:var(--t-font-size-lg);
2278
+ font-weight:var(--t-font-weight-medium);
2279
+ color:var(--t-text-color-headline);
2315
2280
  }
2316
2281
 
2317
- @media (min-width: 960px){
2318
- .tds-page-header__primary{
2319
- flex:1 1 max-content;
2320
- width:auto;
2321
- min-width:0;
2322
- max-width:100%;
2282
+ @media (max-width: 719px){
2283
+ .tds-sidenav-collapse{
2284
+ z-index:10001;
2285
+ display:none;
2286
+ max-width:min(448px, calc(100vw - 48px));
2287
+ padding:0;
2288
+ margin:12px 0;
2289
+ position-area:bottom span-right;
2290
+ overflow:hidden;
2291
+ outline:0;
2292
+ background:var(--t-surface-color-card);
2293
+ border:0;
2294
+ border-radius:6px;
2295
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2296
+ opacity:var(--tds-sidenav-collapse-open-opacity);
2297
+ transform:var(--tds-sidenav-collapse-open-transform);
2298
+ transition:var(--tds-sidenav-collapse-transition-enter);
2299
+ will-change:transform;
2323
2300
  }
2324
2301
 
2325
- .tds-page-header__title-bar,
2326
- .tds-page-header--profile .tds-page-header__title-bar{
2327
- flex-flow:row nowrap;
2328
- row-gap:12px;
2329
- align-items:flex-start;
2302
+ .tds-sidenav-scroll-container{
2303
+ --webkit-overflow-scrolling:touch;
2304
+ display:block;
2305
+ width:100%;
2306
+ height:-moz-fit-content;
2307
+ height:fit-content;
2308
+ padding:var(--t-spacing-2);
2309
+ overflow-y:auto;
2330
2310
  }
2331
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2332
- width:auto;
2311
+
2312
+ .tds-sidenav-item :is(a, button) :is(.prefix){
2313
+ display:none;
2314
+ }
2315
+ @supports selector(:popover-open){
2316
+ .tds-sidenav-collapse:popover-open{
2317
+ display:flex;
2333
2318
  }
2334
2319
 
2335
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2336
- justify-content:flex-end;
2320
+ .tds-sidenav-collapse:not(:popover-open){
2321
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2322
+ transition:var(--tds-sidenav-collapse-transition-exit);
2337
2323
  }
2338
- }
2339
2324
 
2340
- .tds-page-header-phone,
2341
- .tds-page-header-email{
2342
- color:var(--tds-page-header-color);
2343
- white-space:nowrap;
2344
- }
2345
- .tds-page-header-email{
2346
- max-width:100%;
2347
- overflow:hidden;
2348
- text-overflow:ellipsis;
2349
- }
2325
+ @starting-style{
2326
+ .tds-sidenav-collapse:popover-open{
2327
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2328
+ transform:var(--tds-sidenav-collapse-closed-transform);
2329
+ }
2330
+ }
2331
+ }
2332
+ @supports not selector(:popover-open){
2333
+ .tds-sidenav-collapse.\:popover-open{
2334
+ display:flex;
2335
+ }
2350
2336
 
2351
- @keyframes indicator-pulse{
2352
- 0%{
2353
- opacity:.3;
2354
- transform:scale(.9);
2337
+ .tds-sidenav-collapse:not(.\:popover-open){
2338
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2339
+ transition:var(--tds-sidenav-collapse-transition-exit);
2340
+ }
2355
2341
  }
2342
+ }
2356
2343
 
2357
- 100%{
2358
- opacity:0;
2359
- transform:scale(1.75);
2344
+ @media (min-width: 720px){
2345
+ .tds-sidenav-responsive-header{
2346
+ display:none;
2360
2347
  }
2361
2348
  }
2362
2349
 
2350
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2351
+ display:none;
2352
+ }
2353
+
2354
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2355
+ display:block;
2356
+ }
2357
+
2358
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2359
+ display:flex;
2360
+ flex-direction:column;
2361
+ }
2362
+
2363
2363
  .tds-input{
2364
2364
  --tds-input-border-color:var(--t-form-border-color);
2365
2365
  --tds-input-border-color-hover:var(--t-form-border-color-hover);
@@ -4080,130 +4080,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4080
4080
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4081
4081
  }
4082
4082
 
4083
- .tds-segmented-control{
4084
- --tds-segmented-control-font-size:var(--t-font-size-md);
4085
- --tds-segmented-control-padding:var(--t-spacing-half);
4086
- --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4087
- --tds-segmented-control-icon-size:.66666667lh;
4088
- --tds-segmented-control-border-radius:var(--t-border-radius-md);
4089
- --tds-segmented-control-max-width:280px;
4090
- --tds-segmented-control-min-height:var(--t-container-size-md);
4091
- --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4092
- --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4093
- --tds-segmented-control-width:fit-content;
4094
-
4095
- display:flex;
4096
- flex-direction:column;
4097
- gap:var(--t-spacing-half);
4098
- align-items:flex-start;
4099
- width:var(--tds-segmented-control-width);
4100
- }
4101
-
4102
- .tds-segmented-control--sm{
4103
- --tds-segmented-control-font-size:var(--t-font-size-sm);
4104
- --tds-segmented-control-padding-inline:7px;
4105
- --tds-segmented-control-min-height:var(--t-container-size-sm);
4106
- }
4107
-
4108
- .tds-segmented-control--full-width{
4109
- --tds-segmented-control-width:100%;
4110
- --tds-segmented-control-max-width:none;
4111
- }
4112
-
4113
- .tds-segmented-control--full-width .tds-segmented-control-segment{
4114
- flex:1 1 0;
4115
- }
4116
-
4117
- .tds-segmented-control-label{
4118
- font-size:var(--tds-segmented-control-font-size);
4119
- font-weight:var(--t-font-weight-normal);
4120
- color:var(--t-text-color-headline);
4121
- }
4122
-
4123
- .tds-segmented-control-label--hidden{
4124
- position:absolute;
4125
- width:1px;
4126
- height:1px;
4127
- overflow:hidden;
4128
- white-space:nowrap;
4129
- clip-path:inset(50%);
4130
- }
4131
-
4132
- .tds-segmented-control-track{
4133
- display:inline-flex;
4134
- gap:var(--tds-segmented-control-track-gap);
4135
- width:var(--tds-segmented-control-width);
4136
- padding:var(--tds-segmented-control-padding);
4137
- background-color:var(--t-form-background-color);
4138
- border:1px solid var(--t-border-color);
4139
- border-radius:var(--tds-segmented-control-border-radius);
4140
- }
4141
-
4142
- .tds-segmented-control-segment{
4143
- --tds-segmented-control-color:var(--t-text-color-status-neutral);
4144
- --tds-segmented-control-background-color:transparent;
4145
-
4146
- display:inline-flex;
4147
- gap:var(--t-spacing-1);
4148
- align-items:center;
4149
- justify-content:center;
4150
- max-width:var(--tds-segmented-control-max-width);
4151
- min-height:var(--tds-segmented-control-min-height);
4152
- padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4153
- padding-inline:var(--tds-segmented-control-padding-inline);
4154
- font:inherit;
4155
- font-size:var(--tds-segmented-control-font-size);
4156
- color:var(--tds-segmented-control-color);
4157
- text-align:center;
4158
- cursor:pointer;
4159
- -webkit-user-select:none;
4160
- -moz-user-select:none;
4161
- user-select:none;
4162
- background-color:var(--tds-segmented-control-background-color);
4163
- border:0;
4164
- border-radius:var(--t-border-radius-sm);
4165
- transition-timing-function:var(--t-ease-in-out);
4166
- transition-duration:var(--t-duration-200);
4167
- transition-property:color, background-color;
4168
- }
4169
-
4170
- .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4171
- padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4172
- }
4173
-
4174
- .tds-segmented-control-segment .symbol{
4175
- display:block;
4176
- flex-shrink:0;
4177
- width:var(--tds-segmented-control-icon-size);
4178
- height:var(--tds-segmented-control-icon-size);
4179
- }
4180
-
4181
- .tds-segmented-control-segment:focus-visible{
4182
- outline:var(--t-focus-ring-outline);
4183
- outline-offset:var(--t-focus-ring-offset);
4184
- }
4185
-
4186
- .tds-segmented-control-segment[aria-checked="true"]{
4187
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4188
- --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
4189
-
4190
- cursor:default;
4191
- }
4192
-
4193
- .tds-segmented-control-segment:disabled{
4194
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4195
- --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
4196
-
4197
- pointer-events:none;
4198
- }
4199
-
4200
- .tds-segmented-control-segment--interaction-subtle{
4201
- --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4202
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4203
- --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4204
- --tds-segmented-control-background-color-disabled:transparent;
4205
- }
4206
-
4207
4083
  .tds-data-table{
4208
4084
  --tds-data-table-background-color:var(--t-surface-color-canvas);
4209
4085
  --tds-data-table-border-color:var(--t-border-color);
@@ -4718,6 +4594,130 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4718
4594
  }
4719
4595
  }
4720
4596
 
4597
+ .tds-segmented-control{
4598
+ --tds-segmented-control-font-size:var(--t-font-size-md);
4599
+ --tds-segmented-control-padding:var(--t-spacing-half);
4600
+ --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4601
+ --tds-segmented-control-icon-size:.66666667lh;
4602
+ --tds-segmented-control-border-radius:var(--t-border-radius-md);
4603
+ --tds-segmented-control-max-width:280px;
4604
+ --tds-segmented-control-min-height:var(--t-container-size-md);
4605
+ --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4606
+ --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4607
+ --tds-segmented-control-width:fit-content;
4608
+
4609
+ display:flex;
4610
+ flex-direction:column;
4611
+ gap:var(--t-spacing-half);
4612
+ align-items:flex-start;
4613
+ width:var(--tds-segmented-control-width);
4614
+ }
4615
+
4616
+ .tds-segmented-control--sm{
4617
+ --tds-segmented-control-font-size:var(--t-font-size-sm);
4618
+ --tds-segmented-control-padding-inline:7px;
4619
+ --tds-segmented-control-min-height:var(--t-container-size-sm);
4620
+ }
4621
+
4622
+ .tds-segmented-control--full-width{
4623
+ --tds-segmented-control-width:100%;
4624
+ --tds-segmented-control-max-width:none;
4625
+ }
4626
+
4627
+ .tds-segmented-control--full-width .tds-segmented-control-segment{
4628
+ flex:1 1 0;
4629
+ }
4630
+
4631
+ .tds-segmented-control-label{
4632
+ font-size:var(--tds-segmented-control-font-size);
4633
+ font-weight:var(--t-font-weight-normal);
4634
+ color:var(--t-text-color-headline);
4635
+ }
4636
+
4637
+ .tds-segmented-control-label--hidden{
4638
+ position:absolute;
4639
+ width:1px;
4640
+ height:1px;
4641
+ overflow:hidden;
4642
+ white-space:nowrap;
4643
+ clip-path:inset(50%);
4644
+ }
4645
+
4646
+ .tds-segmented-control-track{
4647
+ display:inline-flex;
4648
+ gap:var(--tds-segmented-control-track-gap);
4649
+ width:var(--tds-segmented-control-width);
4650
+ padding:var(--tds-segmented-control-padding);
4651
+ background-color:var(--t-form-background-color);
4652
+ border:1px solid var(--t-border-color);
4653
+ border-radius:var(--tds-segmented-control-border-radius);
4654
+ }
4655
+
4656
+ .tds-segmented-control-segment{
4657
+ --tds-segmented-control-color:var(--t-text-color-status-neutral);
4658
+ --tds-segmented-control-background-color:transparent;
4659
+
4660
+ display:inline-flex;
4661
+ gap:var(--t-spacing-1);
4662
+ align-items:center;
4663
+ justify-content:center;
4664
+ max-width:var(--tds-segmented-control-max-width);
4665
+ min-height:var(--tds-segmented-control-min-height);
4666
+ padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4667
+ padding-inline:var(--tds-segmented-control-padding-inline);
4668
+ font:inherit;
4669
+ font-size:var(--tds-segmented-control-font-size);
4670
+ color:var(--tds-segmented-control-color);
4671
+ text-align:center;
4672
+ cursor:pointer;
4673
+ -webkit-user-select:none;
4674
+ -moz-user-select:none;
4675
+ user-select:none;
4676
+ background-color:var(--tds-segmented-control-background-color);
4677
+ border:0;
4678
+ border-radius:var(--t-border-radius-sm);
4679
+ transition-timing-function:var(--t-ease-in-out);
4680
+ transition-duration:var(--t-duration-200);
4681
+ transition-property:color, background-color;
4682
+ }
4683
+
4684
+ .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4685
+ padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4686
+ }
4687
+
4688
+ .tds-segmented-control-segment .symbol{
4689
+ display:block;
4690
+ flex-shrink:0;
4691
+ width:var(--tds-segmented-control-icon-size);
4692
+ height:var(--tds-segmented-control-icon-size);
4693
+ }
4694
+
4695
+ .tds-segmented-control-segment:focus-visible{
4696
+ outline:var(--t-focus-ring-outline);
4697
+ outline-offset:var(--t-focus-ring-offset);
4698
+ }
4699
+
4700
+ .tds-segmented-control-segment[aria-checked="true"]{
4701
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4702
+ --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
4703
+
4704
+ cursor:default;
4705
+ }
4706
+
4707
+ .tds-segmented-control-segment:disabled{
4708
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4709
+ --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
4710
+
4711
+ pointer-events:none;
4712
+ }
4713
+
4714
+ .tds-segmented-control-segment--interaction-subtle{
4715
+ --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4716
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4717
+ --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4718
+ --tds-segmented-control-background-color-disabled:transparent;
4719
+ }
4720
+
4721
4721
  .tds-data-table-filters-shelf{
4722
4722
  height:auto;
4723
4723
  overflow:hidden;