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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -677,201 +677,6 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
- .tds-checkbox{
681
- --tds-checkbox-font-size:var(--t-font-size-md);
682
- --tds-checkbox-cursor:pointer;
683
- --tds-checkbox-line-height:1.4;
684
- --tds-checkbox-transition-property:background-color, border-color;
685
-
686
- --tds-checkbox-input-size:var(--t-element-size-md);
687
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
688
- --tds-checkbox-input-border-color:var(--t-form-border-color);
689
- --tds-checkbox-input-background-color:var(--t-form-background-color);
690
-
691
- --tds-checkbox-input-icon:none;
692
- --tds-checkbox-input-icon-visibility:hidden;
693
- --tds-checkbox-input-icon-opacity:0;
694
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
695
-
696
- --tds-checkbox-label-color:var(--t-form-color);
697
-
698
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
699
- --tds-checkbox-description-line-height:1.35;
700
- --tds-checkbox-description-color:var(--t-text-color-secondary);
701
- --tds-checkbox-description-invalid-icon-display:none;
702
-
703
- position:relative;
704
- display:inline-grid;
705
- grid-template-columns:auto;
706
- grid-auto-columns:1fr;
707
- gap:var(--t-spacing-fourth) 0;
708
- line-height:var(--tds-checkbox-line-height);
709
- -webkit-user-select:none;
710
- -moz-user-select:none;
711
- user-select:none;
712
- }
713
-
714
- .tds-checkbox label{
715
- grid-area:1 / 2;
716
- padding-inline-start:var(--t-spacing-1);
717
- font-size:var(--tds-checkbox-font-size);
718
- font-weight:var(--t-font-weight-normal);
719
- color:var(--tds-checkbox-label-color);
720
- cursor:var(--tds-checkbox-cursor);
721
- }
722
-
723
- .tds-checkbox tds-indeterminate{
724
- display:flex;
725
- }
726
-
727
- .tds-checkbox input[type="checkbox"]{
728
- position:relative;
729
- width:1em;
730
- height:1em;
731
- margin:calc((1lh - 1em) / 2) 0 0;
732
- font-size:var(--tds-checkbox-font-size);
733
- line-height:inherit;
734
- -webkit-appearance:none;
735
- -moz-appearance:none;
736
- appearance:none;
737
- cursor:var(--tds-checkbox-cursor);
738
- background-color:var(--tds-checkbox-input-background-color);
739
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
740
- border-radius:var(--tds-checkbox-input-border-radius);
741
- transition-timing-function:var(--t-ease-in-out);
742
- transition-duration:var(--t-duration-200);
743
- transition-property:var(--tds-checkbox-transition-property);
744
- }
745
-
746
- :is(.tds-checkbox input[type="checkbox"])::before{
747
- position:absolute;
748
- top:50%;
749
- left:50%;
750
- visibility:var(--tds-checkbox-input-icon-visibility);
751
- width:100%;
752
- height:100%;
753
- content:"";
754
- background-color:var(--tds-checkbox-input-icon-fill);
755
- border-radius:var(--tds-checkbox-input-border-radius);
756
- opacity:var(--tds-checkbox-input-icon-opacity);
757
- -webkit-mask-image:var(--tds-checkbox-input-icon);
758
- mask-image:var(--tds-checkbox-input-icon);
759
- -webkit-mask-repeat:no-repeat;
760
- mask-repeat:no-repeat;
761
- -webkit-mask-size:contain;
762
- mask-size:contain;
763
- transform:translate(-50%, -50%);
764
- }
765
-
766
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
767
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
768
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
769
- }
770
-
771
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
772
- outline:var(--t-focus-ring-outline);
773
- outline-offset:var(--t-focus-ring-offset);
774
- }
775
-
776
- :is(.tds-checkbox input[type="checkbox"]):disabled{
777
- pointer-events:none;
778
- }
779
-
780
- @media (prefers-reduced-motion: reduce){
781
-
782
- .tds-checkbox input[type="checkbox"]{
783
- --tds-checkbox-transition-property:none;
784
- }
785
- }
786
-
787
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
788
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
789
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
790
- --tds-checkbox-input-icon-visibility:visible;
791
- --tds-checkbox-input-icon-opacity:1;
792
- }
793
-
794
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
795
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
796
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
797
- }
798
-
799
- .tds-checkbox:has(input:checked){
800
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
801
- }
802
-
803
- .tds-checkbox:has(input:indeterminate){
804
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
805
- }
806
-
807
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
808
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
809
- --tds-checkbox-description-color:var(--t-text-color-status-error);
810
- --tds-checkbox-description-invalid-icon-display:inline-block;
811
- }
812
-
813
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
814
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
815
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
816
- }
817
-
818
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
819
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
820
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
821
- }
822
-
823
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
824
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
825
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
826
- }
827
-
828
- .tds-checkbox:has(input:required) label::after{
829
- margin-left:.25ch;
830
- color:var(--t-text-color-status-error);
831
- content:"*";
832
- }
833
-
834
- .tds-checkbox:has(input:disabled){
835
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
836
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
837
-
838
- --tds-checkbox-label-color:var(--t-form-color-disabled);
839
- --tds-checkbox-description-color:var(--t-form-color-disabled);
840
- --tds-checkbox-cursor:not-allowed;
841
- }
842
-
843
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
844
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
845
- }
846
-
847
- .tds-checkbox-description{
848
- display:flex;
849
- grid-area:2 / 2;
850
- gap:var(--t-spacing-half);
851
- align-items:flex-start;
852
- padding-inline-start:var(--t-spacing-1);
853
- margin:0;
854
- font-size:var(--tds-checkbox-description-font-size);
855
- line-height:var(--tds-checkbox-description-line-height);
856
- color:var(--tds-checkbox-description-color);
857
- cursor:text;
858
- }
859
-
860
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
861
- display:var(--tds-checkbox-description-invalid-icon-display);
862
- flex-shrink:0;
863
- margin-top:calc(.5lh - .5em);
864
- line-height:var(--tds-checkbox-description-line-height);
865
- }
866
-
867
- .tds-checkbox--sm{
868
- --tds-checkbox-line-height:1.35;
869
- --tds-checkbox-input-size:var(--t-element-size-sm);
870
- --tds-checkbox-font-size:var(--t-font-size-sm);
871
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
872
- --tds-checkbox-description-line-height:1.3;
873
- }
874
-
875
680
  .tds-checkbox-group{
876
681
  --tds-checkbox-group-font-size:var(--t-font-size-md);
877
682
  --tds-checkbox-group-line-height:1.4;
@@ -946,265 +751,60 @@
946
751
  --tds-checkbox-group-description-line-height:1.3;
947
752
  }
948
753
 
949
- .tds-button-group{
950
- display:inline-flex;
754
+ @layer t-critical{
755
+ tds-page-header:not(.hydrated){
756
+ display:none;
757
+ }
951
758
  }
952
- .tds-button-group > .tds-btn{
953
- --tds-button-group-item-z-index:1;
954
759
 
955
- position:relative;
956
- z-index:var(--tds-button-group-item-z-index);
957
- border-radius:0;
760
+ @layer t-component{
761
+ .tds-page-header{
762
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
763
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
764
+ --tds-page-header-color:var(--t-text-color);
765
+ --tds-page-header-bottom-border-color:transparent;
766
+ --tds-page-header-headline-color:var(--t-text-color-headline);
767
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
768
+ --tds-page-header-padding-x:var(--t-spacing-2);
769
+ --tds-page-header-padding-y:var(--t-spacing-2);
770
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
771
+ --tds-page-header-nav-gap:var(--t-spacing-1);
772
+ --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%);
773
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
774
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
775
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
776
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
777
+ --tds-page-header-nav-item-border-width:1px;
778
+
779
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
780
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
781
+
782
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
783
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
784
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
785
+
786
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
787
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
788
+
789
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
790
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
791
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
792
+
793
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
794
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
795
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
796
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
797
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
958
798
  }
959
- :is(.tds-button-group > .tds-btn):not(:first-child){
960
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
961
- }
962
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
963
- position:absolute;
964
- inset-block:calc(var(--tds-btn-border-width) * -1);
965
- width:var(--tds-btn-border-width);
966
- pointer-events:none;
967
- content:"";
968
- background-color:var(--t-border-color-white);
969
- }
970
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
971
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
972
- }
973
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
974
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
975
- }
976
- :is(.tds-button-group > .tds-btn):hover{
977
- --tds-button-group-item-z-index:2;
978
- }
979
- :is(.tds-button-group > .tds-btn):focus-visible{
980
- --tds-button-group-item-z-index:5;
981
- }
982
- .tds-button-group > .tds-btn:first-child{
983
- border-start-start-radius:var(--tds-btn-border-radius);
984
- border-end-start-radius:var(--tds-btn-border-radius);
985
- }
986
- .tds-button-group > .tds-btn:last-child{
987
- border-start-end-radius:var(--tds-btn-border-radius);
988
- border-end-end-radius:var(--tds-btn-border-radius);
989
- }
990
-
991
- .tds-modal-overlay{
992
- --tds-modal-min-margin-block:var(--t-spacing-3);
993
-
994
- position:fixed;
995
- inset:0;
996
- z-index:1000;
997
- display:grid;
998
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
999
- justify-items:center;
1000
- overflow-y:auto;
1001
- background:hsl(0 0% 0% / 40%);
1002
- }
1003
-
1004
- .tds-modal-overlay[data-entering]{
1005
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1006
- }
1007
-
1008
- .tds-modal-overlay[data-exiting]{
1009
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1010
- }
1011
-
1012
- @keyframes tds-modal-overlay-fade{
1013
- from{
1014
- opacity:0;
1015
- }
1016
- }
1017
-
1018
- .tds-modal-frame{
1019
- --tds-modal-width:600px;
1020
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1021
- display:flex;
1022
-
1023
- grid-row:2;
1024
- justify-content:center;
1025
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1026
- }
1027
-
1028
- .tds-modal-frame[data-entering]{
1029
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1030
- }
1031
-
1032
- .tds-modal-frame[data-exiting]{
1033
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1034
- }
1035
-
1036
- .tds-modal-frame--sm{
1037
- --tds-modal-width:400px;
1038
- }
1039
-
1040
- .tds-modal-frame--lg{
1041
- --tds-modal-width:800px;
1042
- }
1043
-
1044
- .tds-modal-frame--xl{
1045
- --tds-modal-width:1000px;
1046
- }
1047
-
1048
- @keyframes tds-modal-zoom{
1049
- from{
1050
- opacity:0;
1051
- scale:.96;
1052
- }
1053
- }
1054
-
1055
- @media (prefers-reduced-motion: reduce){
1056
- .tds-modal-overlay[data-entering],
1057
- .tds-modal-overlay[data-exiting],
1058
- .tds-modal-frame[data-entering],
1059
- .tds-modal-frame[data-exiting]{
1060
- animation:none;
1061
- }
1062
- }
1063
-
1064
- .tds-modal{
1065
- display:flex;
1066
- flex-direction:column;
1067
- width:100%;
1068
- padding-block-start:var(--t-spacing-3);
1069
- padding-inline:0;
1070
- background:var(--t-surface-color-card);
1071
-
1072
- border:0;
1073
- border-radius:var(--t-border-radius-lg);
1074
- box-shadow:0 4px 18px 0 #0003;
1075
- }
1076
-
1077
- .tds-modal:focus{
1078
- outline:none;
1079
- }
1080
-
1081
- .tds-modal-header{
1082
- display:grid;
1083
- grid-template-columns:1fr auto;
1084
- -moz-column-gap:var(--t-spacing-2);
1085
- column-gap:var(--t-spacing-2);
1086
- padding-block:0;
1087
- padding-inline:var(--t-spacing-4);
1088
- }
1089
-
1090
- .tds-modal-title{
1091
- grid-row:1;
1092
- grid-column:1;
1093
- margin:0;
1094
- font-size:var(--t-font-size-2xl);
1095
- font-weight:var(--t-font-weight-medium);
1096
- line-height:140%;
1097
- color:var(--t-text-color-headline);
1098
- }
1099
-
1100
- .tds-modal-subtitle{
1101
- grid-row:2;
1102
- grid-column:1;
1103
- margin:0;
1104
- font-size:var(--t-font-size-md);
1105
- font-weight:var(--t-font-weight-medium);
1106
- line-height:140%;
1107
- color:var(--t-text-color-secondary);
1108
- }
1109
-
1110
- .tds-modal-close{
1111
- grid-row:1;
1112
- grid-column:2;
1113
- align-self:center;
1114
- color:var(--t-icon-color-dim);
1115
- }
1116
-
1117
- .tds-modal-body{
1118
- padding-block:var(--t-spacing-3);
1119
- padding-inline:var(--t-spacing-4);
1120
- }
1121
-
1122
- .tds-modal-body--full-width{
1123
- padding-inline:0;
1124
- }
1125
-
1126
- .tds-modal-footer{
1127
- display:flex;
1128
- gap:var(--t-spacing-2);
1129
- align-items:center;
1130
- justify-content:flex-end;
1131
- padding-block:var(--t-spacing-3);
1132
- padding-inline:var(--t-spacing-4);
1133
- border-top:1px solid var(--t-border-color);
1134
- }
1135
-
1136
- .tds-modal-footer > [slot="start"]{
1137
- margin-inline-end:auto;
1138
- }
1139
-
1140
- @media (min-width: 720px){
1141
- .tds-modal-overlay{
1142
- --tds-modal-min-margin-block:0;
1143
- }
1144
-
1145
- .tds-modal-footer{
1146
- position:sticky;
1147
- bottom:0;
1148
- background:var(--t-surface-color-card);
1149
- border-end-start-radius:var(--t-border-radius-lg);
1150
- border-end-end-radius:var(--t-border-radius-lg);
1151
- }
1152
- }
1153
-
1154
- @layer t-critical{
1155
- tds-page-header:not(.hydrated){
1156
- display:none;
1157
- }
1158
- }
1159
-
1160
- @layer t-component{
1161
- .tds-page-header{
1162
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1163
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1164
- --tds-page-header-color:var(--t-text-color);
1165
- --tds-page-header-bottom-border-color:transparent;
1166
- --tds-page-header-headline-color:var(--t-text-color-headline);
1167
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1168
- --tds-page-header-padding-x:var(--t-spacing-2);
1169
- --tds-page-header-padding-y:var(--t-spacing-2);
1170
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1171
- --tds-page-header-nav-gap:var(--t-spacing-1);
1172
- --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%);
1173
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1174
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1175
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1176
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1177
- --tds-page-header-nav-item-border-width:1px;
1178
-
1179
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1180
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1181
-
1182
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1183
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1184
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1185
-
1186
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1187
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1188
-
1189
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1190
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1191
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1192
-
1193
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1194
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1195
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1196
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1197
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1198
- }
1199
-
1200
- .tds-page-header--profile{
1201
- --tds-page-header-padding-y:20px;
1202
- }
1203
-
1204
- @supports (color: light-dark(#fff, #000)){
1205
- .tds-page-header{
1206
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1207
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
799
+
800
+ .tds-page-header--profile{
801
+ --tds-page-header-padding-y:20px;
802
+ }
803
+
804
+ @supports (color: light-dark(#fff, #000)){
805
+ .tds-page-header{
806
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
807
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1208
808
  }
1209
809
  }
1210
810
 
@@ -1428,132 +1028,487 @@
1428
1028
  }
1429
1029
  }
1430
1030
 
1431
- .tds-input:has(textarea){
1432
- --tds-input-padding-block:6px;
1433
- --tds-input-resizer-size:var(--t-element-size-sm);
1434
- --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");
1031
+ .tds-button-group{
1032
+ display:inline-flex;
1435
1033
  }
1034
+ .tds-button-group > .tds-btn{
1035
+ --tds-button-group-item-z-index:1;
1436
1036
 
1437
- @supports (x: attr(x type(*))){
1438
-
1439
- .tds-input textarea{
1440
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1037
+ position:relative;
1038
+ z-index:var(--tds-button-group-item-z-index);
1039
+ border-radius:0;
1040
+ }
1041
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1042
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1043
+ }
1044
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1045
+ position:absolute;
1046
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1047
+ width:var(--tds-btn-border-width);
1048
+ pointer-events:none;
1049
+ content:"";
1050
+ background-color:var(--t-border-color-white);
1051
+ }
1052
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1053
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1054
+ }
1055
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1056
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1057
+ }
1058
+ :is(.tds-button-group > .tds-btn):hover{
1059
+ --tds-button-group-item-z-index:2;
1060
+ }
1061
+ :is(.tds-button-group > .tds-btn):focus-visible{
1062
+ --tds-button-group-item-z-index:5;
1063
+ }
1064
+ .tds-button-group > .tds-btn:first-child{
1065
+ border-start-start-radius:var(--tds-btn-border-radius);
1066
+ border-end-start-radius:var(--tds-btn-border-radius);
1067
+ }
1068
+ .tds-button-group > .tds-btn:last-child{
1069
+ border-start-end-radius:var(--tds-btn-border-radius);
1070
+ border-end-end-radius:var(--tds-btn-border-radius);
1071
+ }
1072
+
1073
+ .tds-checkbox{
1074
+ --tds-checkbox-font-size:var(--t-font-size-md);
1075
+ --tds-checkbox-cursor:pointer;
1076
+ --tds-checkbox-line-height:1.4;
1077
+ --tds-checkbox-transition-property:background-color, border-color;
1078
+
1079
+ --tds-checkbox-input-size:var(--t-element-size-md);
1080
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1081
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1082
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1083
+
1084
+ --tds-checkbox-input-icon:none;
1085
+ --tds-checkbox-input-icon-visibility:hidden;
1086
+ --tds-checkbox-input-icon-opacity:0;
1087
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1088
+
1089
+ --tds-checkbox-label-color:var(--t-form-color);
1090
+
1091
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1092
+ --tds-checkbox-description-line-height:1.35;
1093
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1094
+ --tds-checkbox-description-invalid-icon-display:none;
1095
+
1096
+ position:relative;
1097
+ display:inline-grid;
1098
+ grid-template-columns:auto;
1099
+ grid-auto-columns:1fr;
1100
+ gap:var(--t-spacing-fourth) 0;
1101
+ line-height:var(--tds-checkbox-line-height);
1102
+ -webkit-user-select:none;
1103
+ -moz-user-select:none;
1104
+ user-select:none;
1441
1105
  }
1106
+
1107
+ .tds-checkbox label{
1108
+ grid-area:1 / 2;
1109
+ padding-inline-start:var(--t-spacing-1);
1110
+ font-size:var(--tds-checkbox-font-size);
1111
+ font-weight:var(--t-font-weight-normal);
1112
+ color:var(--tds-checkbox-label-color);
1113
+ cursor:var(--tds-checkbox-cursor);
1442
1114
  }
1443
1115
 
1444
- .tds-input.tds-textarea--resize-vertical textarea{
1445
- resize:vertical;
1116
+ .tds-checkbox tds-indeterminate{
1117
+ display:flex;
1118
+ }
1119
+
1120
+ .tds-checkbox input[type="checkbox"]{
1121
+ position:relative;
1122
+ width:1em;
1123
+ height:1em;
1124
+ margin:calc((1lh - 1em) / 2) 0 0;
1125
+ font-size:var(--tds-checkbox-font-size);
1126
+ line-height:inherit;
1127
+ -webkit-appearance:none;
1128
+ -moz-appearance:none;
1129
+ appearance:none;
1130
+ cursor:var(--tds-checkbox-cursor);
1131
+ background-color:var(--tds-checkbox-input-background-color);
1132
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1133
+ border-radius:var(--tds-checkbox-input-border-radius);
1134
+ transition-timing-function:var(--t-ease-in-out);
1135
+ transition-duration:var(--t-duration-200);
1136
+ transition-property:var(--tds-checkbox-transition-property);
1137
+ }
1138
+
1139
+ :is(.tds-checkbox input[type="checkbox"])::before{
1140
+ position:absolute;
1141
+ top:50%;
1142
+ left:50%;
1143
+ visibility:var(--tds-checkbox-input-icon-visibility);
1144
+ width:100%;
1145
+ height:100%;
1146
+ content:"";
1147
+ background-color:var(--tds-checkbox-input-icon-fill);
1148
+ border-radius:var(--tds-checkbox-input-border-radius);
1149
+ opacity:var(--tds-checkbox-input-icon-opacity);
1150
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1151
+ mask-image:var(--tds-checkbox-input-icon);
1152
+ -webkit-mask-repeat:no-repeat;
1153
+ mask-repeat:no-repeat;
1154
+ -webkit-mask-size:contain;
1155
+ mask-size:contain;
1156
+ transform:translate(-50%, -50%);
1446
1157
  }
1447
1158
 
1448
- .tds-input.tds-textarea--resize-none textarea{
1449
- resize:none;
1159
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1160
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1161
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1450
1162
  }
1451
1163
 
1452
- .tds-input.tds-textarea--resize-auto textarea{
1453
- resize:vertical;
1164
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1165
+ outline:var(--t-focus-ring-outline);
1166
+ outline-offset:var(--t-focus-ring-offset);
1454
1167
  }
1455
1168
 
1456
- @supports (field-sizing: content){
1457
- .tds-input.tds-textarea--resize-auto textarea{
1458
- field-sizing:content;
1459
- resize:none;
1460
- }
1169
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1170
+ pointer-events:none;
1461
1171
  }
1462
1172
 
1463
- .tds-input textarea{
1464
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1465
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1466
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1467
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1468
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1469
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1470
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1471
- --tds-input-scrollbar-thumb-border-radius:999px;
1472
- --tds-input-scrollbar-thumb-border-width:3px;
1473
- --tds-input-scrollbar-track-margin-block:.125rem;
1474
- scrollbar-color:initial;
1475
- transition-timing-function:var(--t-ease-in-out);
1476
- transition-duration:var(--t-duration-200);
1477
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1478
- }
1173
+ @media (prefers-reduced-motion: reduce){
1479
1174
 
1480
- @media (pointer: fine){
1481
- :is(.tds-input textarea)::-webkit-scrollbar{
1482
- width:12px;
1483
- height:12px;
1484
- cursor:default;
1175
+ .tds-checkbox input[type="checkbox"]{
1176
+ --tds-checkbox-transition-property:none;
1177
+ }
1485
1178
  }
1486
1179
 
1487
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1488
- cursor:default;
1489
- background:var(--tds-input-scrollbar-thumb-color);
1490
- background-clip:content-box;
1491
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1492
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1493
- }
1180
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1181
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1182
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1183
+ --tds-checkbox-input-icon-visibility:visible;
1184
+ --tds-checkbox-input-icon-opacity:1;
1185
+ }
1494
1186
 
1495
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1496
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1187
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1188
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1189
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1497
1190
  }
1498
1191
 
1499
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1500
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1501
- }
1192
+ .tds-checkbox:has(input:checked){
1193
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1194
+ }
1502
1195
 
1503
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1504
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1196
+ .tds-checkbox:has(input:indeterminate){
1197
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1198
+ }
1199
+
1200
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1201
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1202
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1203
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1204
+ }
1205
+
1206
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1207
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1208
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1505
1209
  }
1506
1210
 
1507
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1508
- background:var(--tds-input-scrollbar-surface-color);
1211
+ :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{
1212
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1213
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1509
1214
  }
1510
1215
 
1511
- :is(.tds-input textarea)::-webkit-resizer{
1512
- background:var(--tds-input-resizer-icon) no-repeat;
1513
- background-position:right bottom;
1514
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1216
+ :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){
1217
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1218
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1219
+ }
1220
+
1221
+ .tds-checkbox:has(input:required) label::after{
1222
+ margin-left:.25ch;
1223
+ color:var(--t-text-color-status-error);
1224
+ content:"*";
1515
1225
  }
1516
1226
 
1517
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1518
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1519
- cursor:default;
1227
+ .tds-checkbox:has(input:disabled){
1228
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1229
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1230
+
1231
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1232
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1233
+ --tds-checkbox-cursor:not-allowed;
1234
+ }
1235
+
1236
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1237
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1520
1238
  }
1521
1239
 
1522
- @supports (-moz-appearance: none){
1523
- :is(.tds-input textarea){
1524
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1525
- scrollbar-width:thin;
1240
+ .tds-checkbox-description{
1241
+ display:flex;
1242
+ grid-area:2 / 2;
1243
+ gap:var(--t-spacing-half);
1244
+ align-items:flex-start;
1245
+ padding-inline-start:var(--t-spacing-1);
1246
+ margin:0;
1247
+ font-size:var(--tds-checkbox-description-font-size);
1248
+ line-height:var(--tds-checkbox-description-line-height);
1249
+ color:var(--tds-checkbox-description-color);
1250
+ cursor:text;
1251
+ }
1252
+
1253
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1254
+ display:var(--tds-checkbox-description-invalid-icon-display);
1255
+ flex-shrink:0;
1256
+ margin-top:calc(.5lh - .5em);
1257
+ line-height:var(--tds-checkbox-description-line-height);
1258
+ }
1259
+
1260
+ .tds-checkbox--sm{
1261
+ --tds-checkbox-line-height:1.35;
1262
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1263
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1264
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1265
+ --tds-checkbox-description-line-height:1.3;
1266
+ }
1267
+
1268
+ .tds-modal-overlay{
1269
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1270
+
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
+ }
1280
+
1281
+ .tds-modal-overlay[data-entering]{
1282
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1283
+ }
1284
+
1285
+ .tds-modal-overlay[data-exiting]{
1286
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1287
+ }
1288
+
1289
+ @keyframes tds-modal-overlay-fade{
1290
+ from{
1291
+ opacity:0;
1292
+ }
1293
+ }
1294
+
1295
+ .tds-modal-frame{
1296
+ --tds-modal-width:600px;
1297
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1298
+ display:flex;
1299
+
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
+ }
1304
+
1305
+ .tds-modal-frame[data-entering]{
1306
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1307
+ }
1308
+
1309
+ .tds-modal-frame[data-exiting]{
1310
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1311
+ }
1312
+
1313
+ .tds-modal-frame--sm{
1314
+ --tds-modal-width:400px;
1315
+ }
1316
+
1317
+ .tds-modal-frame--lg{
1318
+ --tds-modal-width:800px;
1319
+ }
1320
+
1321
+ .tds-modal-frame--xl{
1322
+ --tds-modal-width:1000px;
1323
+ }
1324
+
1325
+ @keyframes tds-modal-zoom{
1326
+ from{
1327
+ opacity:0;
1328
+ scale:.96;
1329
+ }
1330
+ }
1331
+
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
+ }
1340
+
1341
+ .tds-modal{
1342
+ display:flex;
1343
+ flex-direction:column;
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;
1352
+ }
1353
+
1354
+ .tds-modal:focus{
1355
+ outline:none;
1356
+ }
1357
+
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);
1365
+ }
1366
+
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
+ }
1376
+
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
+ }
1386
+
1387
+ .tds-modal-close{
1388
+ grid-row:1;
1389
+ grid-column:2;
1390
+ align-self:center;
1391
+ color:var(--t-icon-color-dim);
1392
+ }
1393
+
1394
+ .tds-modal-body{
1395
+ padding-block:var(--t-spacing-3);
1396
+ padding-inline:var(--t-spacing-4);
1397
+ }
1398
+
1399
+ .tds-modal-body--full-width{
1400
+ padding-inline:0;
1401
+ }
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);
1411
+ }
1412
+
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;
1420
+ }
1421
+
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);
1428
+ }
1429
+ }
1430
+
1431
+ .tds-radio-group{
1432
+ --tds-radio-group-font-size:var(--t-font-size-md);
1433
+ --tds-radio-group-line-height:1.4;
1434
+ --tds-radio-group-gap:var(--t-spacing-1);
1435
+
1436
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1437
+ --tds-radio-group-description-line-height:1.35;
1438
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1439
+ --tds-radio-group-description-invalid-icon-display:none;
1440
+ display:flex;
1441
+ flex-direction:column;
1442
+ gap:0;
1443
+ padding:0;
1444
+ margin:0;
1445
+
1446
+ font-size:var(--tds-radio-group-font-size);
1447
+ line-height:var(--tds-radio-group-line-height);
1448
+ border:0;
1449
+ }
1450
+
1451
+ .tds-radio-group legend{
1452
+ float:left;
1453
+ padding:0;
1454
+ margin:0;
1455
+ }
1456
+
1457
+ .tds-radio-group[aria-invalid="true"]{
1458
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1459
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1460
+ }
1461
+
1462
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1463
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1464
+ }
1465
+
1466
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1467
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1468
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1526
1469
  }
1527
1470
 
1528
- @media (hover){
1529
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1530
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1531
- }
1471
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1472
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1532
1473
  }
1474
+
1475
+ .tds-radio-group:has(input:required) legend::after{
1476
+ margin-left:.25ch;
1477
+ color:var(--t-text-color-status-error);
1478
+ content:"*";
1533
1479
  }
1534
- }
1535
1480
 
1481
+ .tds-radio-group-fields{
1482
+ display:flex;
1483
+ flex-direction:column;
1484
+ gap:var(--tds-radio-group-gap);
1485
+ align-items:flex-start;
1486
+ margin-top:var(--t-spacing-1);
1487
+ }
1536
1488
 
1537
- :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{
1538
- -webkit-appearance:none;
1539
- appearance:none;
1540
- }
1489
+ .tds-radio-group-description{
1490
+ display:flex;
1491
+ gap:var(--t-spacing-half);
1492
+ align-items:flex-start;
1493
+ margin:var(--t-spacing-fourth) 0 0;
1494
+ font-size:var(--tds-radio-group-description-font-size);
1495
+ line-height:var(--tds-radio-group-description-line-height);
1496
+ color:var(--tds-radio-group-description-color);
1497
+ cursor:text;
1498
+ }
1541
1499
 
1542
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1543
- inline-size:1em;
1544
- block-size:2em;
1545
- }
1546
- @supports (field-sizing: content){
1547
- .tds-input--auto-width{
1548
- inline-size:-moz-fit-content;
1549
- inline-size:fit-content;
1550
- min-inline-size:min(100%, 122px);
1500
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1501
+ display:var(--tds-radio-group-description-invalid-icon-display);
1502
+ flex-shrink:0;
1503
+ margin-top:calc(.5lh - .5em);
1504
+ line-height:var(--tds-radio-group-description-line-height);
1551
1505
  }
1552
1506
 
1553
- .tds-input--auto-width input{
1554
- field-sizing:content;
1555
- inline-size:auto;
1556
- }
1507
+ .tds-radio-group--sm{
1508
+ --tds-radio-group-line-height:1.35;
1509
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1510
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1511
+ --tds-radio-group-description-line-height:1.3;
1557
1512
  }
1558
1513
 
1559
1514
  .tds-radio{
@@ -1689,87 +1644,27 @@
1689
1644
  --tds-radio-description-line-height:1.3;
1690
1645
  }
1691
1646
 
1692
- .tds-radio-group{
1693
- --tds-radio-group-font-size:var(--t-font-size-md);
1694
- --tds-radio-group-line-height:1.4;
1695
- --tds-radio-group-gap:var(--t-spacing-1);
1696
-
1697
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1698
- --tds-radio-group-description-line-height:1.35;
1699
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1700
- --tds-radio-group-description-invalid-icon-display:none;
1701
- display:flex;
1702
- flex-direction:column;
1703
- gap:0;
1704
- padding:0;
1705
- margin:0;
1706
-
1707
- font-size:var(--tds-radio-group-font-size);
1708
- line-height:var(--tds-radio-group-line-height);
1709
- border:0;
1710
- }
1711
-
1712
- .tds-radio-group legend{
1713
- float:left;
1714
- padding:0;
1715
- margin:0;
1716
- }
1717
-
1718
- .tds-radio-group[aria-invalid="true"]{
1719
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1720
- --tds-radio-group-description-invalid-icon-display:inline-block;
1721
- }
1722
1647
 
1723
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1724
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1648
+ :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{
1649
+ -webkit-appearance:none;
1650
+ appearance:none;
1725
1651
  }
1726
1652
 
1727
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1728
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1729
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1730
- }
1731
-
1732
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1733
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1734
- }
1735
-
1736
- .tds-radio-group:has(input:required) legend::after{
1737
- margin-left:.25ch;
1738
- color:var(--t-text-color-status-error);
1739
- content:"*";
1653
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1654
+ inline-size:1em;
1655
+ block-size:2em;
1740
1656
  }
1741
-
1742
- .tds-radio-group-fields{
1743
- display:flex;
1744
- flex-direction:column;
1745
- gap:var(--tds-radio-group-gap);
1746
- align-items:flex-start;
1747
- margin-top:var(--t-spacing-1);
1748
- }
1749
-
1750
- .tds-radio-group-description{
1751
- display:flex;
1752
- gap:var(--t-spacing-half);
1753
- align-items:flex-start;
1754
- margin:var(--t-spacing-fourth) 0 0;
1755
- font-size:var(--tds-radio-group-description-font-size);
1756
- line-height:var(--tds-radio-group-description-line-height);
1757
- color:var(--tds-radio-group-description-color);
1758
- cursor:text;
1759
- }
1760
-
1761
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1762
- display:var(--tds-radio-group-description-invalid-icon-display);
1763
- flex-shrink:0;
1764
- margin-top:calc(.5lh - .5em);
1765
- line-height:var(--tds-radio-group-description-line-height);
1657
+ @supports (field-sizing: content){
1658
+ .tds-input--auto-width{
1659
+ inline-size:-moz-fit-content;
1660
+ inline-size:fit-content;
1661
+ min-inline-size:min(100%, 122px);
1766
1662
  }
1767
1663
 
1768
- .tds-radio-group--sm{
1769
- --tds-radio-group-line-height:1.35;
1770
- --tds-radio-group-font-size:var(--t-font-size-sm);
1771
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1772
- --tds-radio-group-description-line-height:1.3;
1664
+ .tds-input--auto-width input{
1665
+ field-sizing:content;
1666
+ inline-size:auto;
1667
+ }
1773
1668
  }
1774
1669
 
1775
1670
  .tds-toggle-switch{
@@ -1912,6 +1807,111 @@
1912
1807
  --tds-toggle-switch-display:inline-flex;
1913
1808
  }
1914
1809
 
1810
+ .tds-input:has(textarea){
1811
+ --tds-input-padding-block:6px;
1812
+ --tds-input-resizer-size:var(--t-element-size-sm);
1813
+ --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");
1814
+ }
1815
+
1816
+ @supports (x: attr(x type(*))){
1817
+
1818
+ .tds-input textarea{
1819
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1820
+ }
1821
+ }
1822
+
1823
+ .tds-input.tds-textarea--resize-vertical textarea{
1824
+ resize:vertical;
1825
+ }
1826
+
1827
+ .tds-input.tds-textarea--resize-none textarea{
1828
+ resize:none;
1829
+ }
1830
+
1831
+ .tds-input.tds-textarea--resize-auto textarea{
1832
+ resize:vertical;
1833
+ }
1834
+
1835
+ @supports (field-sizing: content){
1836
+ .tds-input.tds-textarea--resize-auto textarea{
1837
+ field-sizing:content;
1838
+ resize:none;
1839
+ }
1840
+ }
1841
+
1842
+ .tds-input textarea{
1843
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1844
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1845
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1846
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1847
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1848
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1849
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1850
+ --tds-input-scrollbar-thumb-border-radius:999px;
1851
+ --tds-input-scrollbar-thumb-border-width:3px;
1852
+ --tds-input-scrollbar-track-margin-block:.125rem;
1853
+ scrollbar-color:initial;
1854
+ transition-timing-function:var(--t-ease-in-out);
1855
+ transition-duration:var(--t-duration-200);
1856
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1857
+ }
1858
+
1859
+ @media (pointer: fine){
1860
+ :is(.tds-input textarea)::-webkit-scrollbar{
1861
+ width:12px;
1862
+ height:12px;
1863
+ cursor:default;
1864
+ }
1865
+
1866
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1867
+ cursor:default;
1868
+ background:var(--tds-input-scrollbar-thumb-color);
1869
+ background-clip:content-box;
1870
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1871
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1872
+ }
1873
+
1874
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1875
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1876
+ }
1877
+
1878
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1879
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1880
+ }
1881
+
1882
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1883
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1884
+ }
1885
+
1886
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1887
+ background:var(--tds-input-scrollbar-surface-color);
1888
+ }
1889
+
1890
+ :is(.tds-input textarea)::-webkit-resizer{
1891
+ background:var(--tds-input-resizer-icon) no-repeat;
1892
+ background-position:right bottom;
1893
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1894
+ }
1895
+
1896
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1897
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1898
+ cursor:default;
1899
+ }
1900
+
1901
+ @supports (-moz-appearance: none){
1902
+ :is(.tds-input textarea){
1903
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1904
+ scrollbar-width:thin;
1905
+ }
1906
+
1907
+ @media (hover){
1908
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1909
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1910
+ }
1911
+ }
1912
+ }
1913
+ }
1914
+
1915
1915
 
1916
1916
  @media (prefers-reduced-motion: no-preference){
1917
1917