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