@planningcenter/tapestry 3.2.1-rc.8 → 3.2.1

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.
@@ -1,197 +1,3 @@
1
- .tds-checkbox{
2
- --tds-checkbox-font-size:var(--t-font-size-md);
3
- --tds-checkbox-cursor:pointer;
4
- --tds-checkbox-line-height:1.4;
5
- --tds-checkbox-transition-property:background-color, border-color;
6
-
7
- --tds-checkbox-input-size:var(--t-element-size-md);
8
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
9
- --tds-checkbox-input-border-color:var(--t-form-border-color);
10
- --tds-checkbox-input-background-color:transparent;
11
-
12
- --tds-checkbox-input-icon:none;
13
- --tds-checkbox-input-icon-visibility:hidden;
14
- --tds-checkbox-input-icon-opacity:0;
15
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
16
-
17
- --tds-checkbox-label-color:var(--t-form-color);
18
-
19
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
20
- --tds-checkbox-description-line-height:1.35;
21
- --tds-checkbox-description-color:var(--t-text-color-secondary);
22
- --tds-checkbox-description-invalid-icon-display:none;
23
-
24
- position:relative;
25
- display:inline-grid;
26
- grid-template-columns:auto;
27
- grid-auto-columns:1fr;
28
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
29
- line-height:var(--tds-checkbox-line-height);
30
- cursor:var(--tds-checkbox-cursor);
31
- -webkit-user-select:none;
32
- -moz-user-select:none;
33
- user-select:none;
34
- }
35
-
36
- .tds-checkbox label{
37
- grid-area:1 / 2;
38
- font-size:var(--tds-checkbox-font-size);
39
- font-weight:var(--t-font-weight-normal);
40
- color:var(--tds-checkbox-label-color);
41
- cursor:var(--tds-checkbox-cursor);
42
- }
43
-
44
- .tds-checkbox tds-indeterminate{
45
- display:flex;
46
- }
47
-
48
- .tds-checkbox input[type="checkbox"]{
49
- position:relative;
50
- width:1em;
51
- height:1em;
52
- margin:calc((1lh - 1em) / 2) 0 0;
53
- font-size:var(--tds-checkbox-font-size);
54
- line-height:inherit;
55
- -webkit-appearance:none;
56
- -moz-appearance:none;
57
- appearance:none;
58
- cursor:var(--tds-checkbox-cursor);
59
- background-color:var(--tds-checkbox-input-background-color);
60
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
61
- border-radius:var(--tds-checkbox-input-border-radius);
62
- transition-timing-function:var(--t-ease-in-out);
63
- transition-duration:var(--t-duration-200);
64
- transition-property:var(--tds-checkbox-transition-property);
65
- }
66
-
67
- :is(.tds-checkbox input[type="checkbox"])::before{
68
- position:absolute;
69
- top:50%;
70
- left:50%;
71
- visibility:var(--tds-checkbox-input-icon-visibility);
72
- width:100%;
73
- height:100%;
74
- content:"";
75
- background-color:var(--tds-checkbox-input-icon-fill);
76
- border-radius:var(--tds-checkbox-input-border-radius);
77
- opacity:var(--tds-checkbox-input-icon-opacity);
78
- -webkit-mask-image:var(--tds-checkbox-input-icon);
79
- mask-image:var(--tds-checkbox-input-icon);
80
- -webkit-mask-repeat:no-repeat;
81
- mask-repeat:no-repeat;
82
- -webkit-mask-size:contain;
83
- mask-size:contain;
84
- transform:translate(-50%, -50%);
85
- }
86
-
87
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
88
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
89
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
90
- }
91
-
92
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
93
- outline:var(--t-focus-ring-outline);
94
- outline-offset:var(--t-focus-ring-offset);
95
- }
96
-
97
- :is(.tds-checkbox input[type="checkbox"]):disabled{
98
- pointer-events:none;
99
- }
100
-
101
- @media (prefers-reduced-motion: reduce){
102
-
103
- .tds-checkbox input[type="checkbox"]{
104
- --tds-checkbox-transition-property:none;
105
- }
106
- }
107
-
108
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
109
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
110
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
111
- --tds-checkbox-input-icon-visibility:visible;
112
- --tds-checkbox-input-icon-opacity:1;
113
- }
114
-
115
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
116
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
117
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
118
- }
119
-
120
- .tds-checkbox:has(input:checked){
121
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
122
- }
123
-
124
- .tds-checkbox:has(input:indeterminate){
125
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
126
- }
127
-
128
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
129
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
130
- --tds-checkbox-description-color:var(--t-text-color-status-error);
131
- --tds-checkbox-description-invalid-icon-display:inline-block;
132
- }
133
-
134
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
135
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
136
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
137
- }
138
-
139
- :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{
140
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
141
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
142
- }
143
-
144
- :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){
145
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
146
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
147
- }
148
-
149
- .tds-checkbox:has(input:required) label::after{
150
- margin-left:.25ch;
151
- color:var(--t-text-color-status-error);
152
- content:"*";
153
- }
154
-
155
- .tds-checkbox:has(input:disabled){
156
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
157
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
158
-
159
- --tds-checkbox-label-color:var(--t-form-color-disabled);
160
- --tds-checkbox-description-color:var(--t-form-color-disabled);
161
- --tds-checkbox-cursor:not-allowed;
162
- }
163
-
164
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
165
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
166
- }
167
-
168
- .tds-checkbox-description{
169
- display:flex;
170
- grid-area:2 / 2;
171
- gap:var(--t-spacing-half);
172
- align-items:flex-start;
173
- margin:0;
174
- font-size:var(--tds-checkbox-description-font-size);
175
- line-height:var(--tds-checkbox-description-line-height);
176
- color:var(--tds-checkbox-description-color);
177
- cursor:text;
178
- }
179
-
180
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
181
- display:var(--tds-checkbox-description-invalid-icon-display);
182
- flex-shrink:0;
183
- margin-top:calc(.5lh - .5em);
184
- line-height:var(--tds-checkbox-description-line-height);
185
- }
186
-
187
- .tds-checkbox--sm{
188
- --tds-checkbox-line-height:1.35;
189
- --tds-checkbox-input-size:var(--t-element-size-sm);
190
- --tds-checkbox-font-size:var(--t-font-size-sm);
191
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
192
- --tds-checkbox-description-line-height:1.3;
193
- }
194
-
195
1
 
196
2
  @media (prefers-reduced-motion: no-preference){
197
3
 
@@ -817,6 +623,29 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
817
623
  }
818
624
  }
819
625
 
626
+
627
+ :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{
628
+ -webkit-appearance:none;
629
+ appearance:none;
630
+ }
631
+
632
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
633
+ inline-size:1em;
634
+ block-size:2em;
635
+ }
636
+
637
+ @supports (field-sizing: content){
638
+ .tds-input--auto-width{
639
+ inline-size:-moz-fit-content;
640
+ inline-size:fit-content;
641
+ }
642
+
643
+ .tds-input--auto-width input{
644
+ field-sizing:content;
645
+ inline-size:auto;
646
+ }
647
+ }
648
+
820
649
  .tds-radio{
821
650
  --tds-radio-font-size:var(--t-font-size-md);
822
651
  --tds-radio-cursor:pointer;
@@ -949,134 +778,200 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
949
778
  --tds-radio-description-line-height:1.3;
950
779
  }
951
780
 
781
+ .tds-checkbox{
782
+ --tds-checkbox-font-size:var(--t-font-size-md);
783
+ --tds-checkbox-cursor:pointer;
784
+ --tds-checkbox-line-height:1.4;
785
+ --tds-checkbox-transition-property:background-color, border-color;
952
786
 
953
- :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{
954
- -webkit-appearance:none;
955
- appearance:none;
956
- }
787
+ --tds-checkbox-input-size:var(--t-element-size-md);
788
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
789
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
790
+ --tds-checkbox-input-background-color:transparent;
957
791
 
958
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
959
- inline-size:1em;
960
- block-size:2em;
961
- }
792
+ --tds-checkbox-input-icon:none;
793
+ --tds-checkbox-input-icon-visibility:hidden;
794
+ --tds-checkbox-input-icon-opacity:0;
795
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
962
796
 
963
- @supports (field-sizing: content){
964
- .tds-input--auto-width{
965
- inline-size:-moz-fit-content;
966
- inline-size:fit-content;
967
- }
797
+ --tds-checkbox-label-color:var(--t-form-color);
968
798
 
969
- .tds-input--auto-width input{
970
- field-sizing:content;
971
- inline-size:auto;
972
- }
973
- }
799
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
800
+ --tds-checkbox-description-line-height:1.35;
801
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
802
+ --tds-checkbox-description-invalid-icon-display:none;
974
803
 
975
- .tds-input:has(textarea){
976
- --tds-input-padding-block:6px;
977
- --tds-input-resizer-size:var(--t-element-size-sm);
978
- --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");
804
+ position:relative;
805
+ display:inline-grid;
806
+ grid-template-columns:auto;
807
+ grid-auto-columns:1fr;
808
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
809
+ line-height:var(--tds-checkbox-line-height);
810
+ cursor:var(--tds-checkbox-cursor);
811
+ -webkit-user-select:none;
812
+ -moz-user-select:none;
813
+ user-select:none;
979
814
  }
980
815
 
981
- @supports (x: attr(x type(*))){
816
+ .tds-checkbox label{
817
+ grid-area:1 / 2;
818
+ font-size:var(--tds-checkbox-font-size);
819
+ font-weight:var(--t-font-weight-normal);
820
+ color:var(--tds-checkbox-label-color);
821
+ cursor:var(--tds-checkbox-cursor);
822
+ }
982
823
 
983
- .tds-input:has(textarea){
984
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
985
- }
824
+ .tds-checkbox tds-indeterminate{
825
+ display:flex;
986
826
  }
987
827
 
988
- .tds-input.tds-textarea--resize-vertical textarea{
989
- resize:vertical;
828
+ .tds-checkbox input[type="checkbox"]{
829
+ position:relative;
830
+ width:1em;
831
+ height:1em;
832
+ margin:calc((1lh - 1em) / 2) 0 0;
833
+ font-size:var(--tds-checkbox-font-size);
834
+ line-height:inherit;
835
+ -webkit-appearance:none;
836
+ -moz-appearance:none;
837
+ appearance:none;
838
+ cursor:var(--tds-checkbox-cursor);
839
+ background-color:var(--tds-checkbox-input-background-color);
840
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
841
+ border-radius:var(--tds-checkbox-input-border-radius);
842
+ transition-timing-function:var(--t-ease-in-out);
843
+ transition-duration:var(--t-duration-200);
844
+ transition-property:var(--tds-checkbox-transition-property);
845
+ }
846
+
847
+ :is(.tds-checkbox input[type="checkbox"])::before{
848
+ position:absolute;
849
+ top:50%;
850
+ left:50%;
851
+ visibility:var(--tds-checkbox-input-icon-visibility);
852
+ width:100%;
853
+ height:100%;
854
+ content:"";
855
+ background-color:var(--tds-checkbox-input-icon-fill);
856
+ border-radius:var(--tds-checkbox-input-border-radius);
857
+ opacity:var(--tds-checkbox-input-icon-opacity);
858
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
859
+ mask-image:var(--tds-checkbox-input-icon);
860
+ -webkit-mask-repeat:no-repeat;
861
+ mask-repeat:no-repeat;
862
+ -webkit-mask-size:contain;
863
+ mask-size:contain;
864
+ transform:translate(-50%, -50%);
990
865
  }
991
866
 
992
- .tds-input.tds-textarea--resize-none textarea{
993
- resize:none;
867
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
868
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
869
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
994
870
  }
995
871
 
996
- .tds-input.tds-textarea--resize-auto textarea{
997
- resize:vertical;
872
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
873
+ outline:var(--t-focus-ring-outline);
874
+ outline-offset:var(--t-focus-ring-offset);
998
875
  }
999
876
 
1000
- @supports (field-sizing: content){
1001
- .tds-input.tds-textarea--resize-auto textarea{
1002
- field-sizing:content;
1003
- resize:none;
1004
- }
877
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
878
+ pointer-events:none;
1005
879
  }
1006
880
 
1007
- .tds-input textarea{
1008
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1009
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1010
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1011
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1012
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1013
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1014
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1015
- --tds-input-scrollbar-thumb-border-radius:999px;
1016
- --tds-input-scrollbar-thumb-border-width:3px;
1017
- --tds-input-scrollbar-track-margin-block:.125rem;
1018
- scrollbar-color:initial;
1019
- transition-timing-function:var(--t-ease-in-out);
1020
- transition-duration:var(--t-duration-200);
1021
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1022
- }
881
+ @media (prefers-reduced-motion: reduce){
1023
882
 
1024
- @media (pointer: fine){
1025
- :is(.tds-input textarea)::-webkit-scrollbar{
1026
- width:12px;
1027
- height:12px;
1028
- cursor:default;
883
+ .tds-checkbox input[type="checkbox"]{
884
+ --tds-checkbox-transition-property:none;
885
+ }
1029
886
  }
1030
887
 
1031
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1032
- cursor:default;
1033
- background:var(--tds-input-scrollbar-thumb-color);
1034
- background-clip:content-box;
1035
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1036
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1037
- }
888
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
889
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
890
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
891
+ --tds-checkbox-input-icon-visibility:visible;
892
+ --tds-checkbox-input-icon-opacity:1;
893
+ }
1038
894
 
1039
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1040
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
895
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
896
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
897
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1041
898
  }
1042
899
 
1043
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1044
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1045
- }
900
+ .tds-checkbox:has(input:checked){
901
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
902
+ }
1046
903
 
1047
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1048
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1049
- }
904
+ .tds-checkbox:has(input:indeterminate){
905
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
906
+ }
1050
907
 
1051
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1052
- background:var(--tds-input-scrollbar-surface-color);
1053
- }
908
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
909
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
910
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
911
+ --tds-checkbox-description-invalid-icon-display:inline-block;
912
+ }
1054
913
 
1055
- :is(.tds-input textarea)::-webkit-resizer{
1056
- background:var(--tds-input-resizer-icon) no-repeat;
1057
- background-position:right bottom;
1058
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
914
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
915
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
916
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1059
917
  }
1060
918
 
1061
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1062
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1063
- cursor:default;
919
+ :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{
920
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
921
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1064
922
  }
1065
923
 
1066
- @supports (-moz-appearance: none){
1067
- :is(.tds-input textarea){
1068
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1069
- scrollbar-width:thin;
924
+ :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){
925
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
926
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1070
927
  }
1071
928
 
1072
- @media (hover){
1073
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1074
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1075
- }
1076
- }
929
+ .tds-checkbox:has(input:required) label::after{
930
+ margin-left:.25ch;
931
+ color:var(--t-text-color-status-error);
932
+ content:"*";
933
+ }
934
+
935
+ .tds-checkbox:has(input:disabled){
936
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
937
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
938
+
939
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
940
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
941
+ --tds-checkbox-cursor:not-allowed;
942
+ }
943
+
944
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
945
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1077
946
  }
947
+
948
+ .tds-checkbox-description{
949
+ display:flex;
950
+ grid-area:2 / 2;
951
+ gap:var(--t-spacing-half);
952
+ align-items:flex-start;
953
+ margin:0;
954
+ font-size:var(--tds-checkbox-description-font-size);
955
+ line-height:var(--tds-checkbox-description-line-height);
956
+ color:var(--tds-checkbox-description-color);
957
+ cursor:text;
958
+ }
959
+
960
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
961
+ display:var(--tds-checkbox-description-invalid-icon-display);
962
+ flex-shrink:0;
963
+ margin-top:calc(.5lh - .5em);
964
+ line-height:var(--tds-checkbox-description-line-height);
1078
965
  }
1079
966
 
967
+ .tds-checkbox--sm{
968
+ --tds-checkbox-line-height:1.35;
969
+ --tds-checkbox-input-size:var(--t-element-size-sm);
970
+ --tds-checkbox-font-size:var(--t-font-size-sm);
971
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
972
+ --tds-checkbox-description-line-height:1.3;
973
+ }
974
+
1080
975
  .tds-radio-group{
1081
976
  --tds-radio-group-font-size:var(--t-font-size-md);
1082
977
  --tds-radio-group-line-height:1.4;
@@ -1164,46 +1059,292 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1164
1059
  --tds-radio-group-description-line-height:1.3;
1165
1060
  }
1166
1061
 
1167
- .tds-select{
1168
- --tds-select-border-color:var(--t-form-border-color);
1169
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
1170
- --tds-select-border-color-active:var(--t-form-border-color-hover);
1171
- --tds-select-background-color:var(--t-form-background-color);
1172
- --tds-select-color:var(--t-form-color);
1173
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
1174
- --tds-select-font-size:var(--t-font-size-md);
1175
- --tds-select-min-height:var(--t-container-size-md);
1176
- --tds-select-padding-block:6px;
1177
- --tds-select-description-color:var(--t-text-color-secondary);
1178
- --tds-select-description-invalid-icon-display:none;
1179
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1180
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1181
- --tds-select-caret-size:1em;
1182
- --tds-select-caret-inline-offset:.75em;
1183
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1062
+ .tds-toggle-switch{
1063
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1064
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1065
+ --tds-toggle-switch-cursor:pointer;
1066
+ --tds-toggle-switch-display:inline-grid;
1067
+ --tds-toggle-switch-line-height:1.4;
1184
1068
 
1185
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
1186
- --tds-select-dropdown-border:1px solid var(--t-border-color);
1187
- --tds-select-dropdown-padding:var(--t-spacing-1);
1188
- --tds-select-dropdown-margin-block:5px;
1189
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
1190
- --tds-select-dropdown-scrollbar-width:thin;
1191
- --tds-select-dropdown-border-radius:var(--t-border-radius);
1192
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1193
- --tds-select-dropdown-scroll-behavior:smooth;
1194
- --tds-select-dropdown-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;
1195
- --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1196
- --tds-select-dropdown-closed-opacity:0;
1197
- --tds-select-dropdown-open-opacity:1;
1198
- --tds-select-dropdown-closed-transform:translateY(-8px);
1199
- --tds-select-dropdown-open-transform:translateY(0);
1069
+ --tds-toggle-switch-label-color:var(--t-form-color);
1200
1070
 
1201
- --tds-select-option-gap:var(--t-spacing-1);
1202
- --tds-select-option-padding-block:var(--t-spacing-1);
1203
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1204
- --tds-select-option-font-size:1rem;
1205
- --tds-select-option-color:var(--t-text-color);
1206
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1071
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1072
+ --tds-toggle-switch-track-outline:none;
1073
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1074
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1075
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1076
+
1077
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1078
+ --tds-toggle-switch-thumb-transform:translateX(0);
1079
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1080
+
1081
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1082
+ --tds-toggle-switch-description-line-height:1.35;
1083
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1084
+ position:relative;
1085
+
1086
+ display:var(--tds-toggle-switch-display);
1087
+ grid-template-columns:auto;
1088
+ grid-auto-columns:1fr;
1089
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1090
+ -webkit-user-select:none;
1091
+ -moz-user-select:none;
1092
+ user-select:none;
1093
+ }
1094
+
1095
+ .tds-toggle-switch input[type="checkbox"]{
1096
+ position:absolute;
1097
+ width:var(--tds-toggle-switch-track-width);
1098
+ height:var(--tds-toggle-switch-track-height);
1099
+ margin:0;
1100
+ -webkit-appearance:none;
1101
+ -moz-appearance:none;
1102
+ appearance:none;
1103
+ cursor:var(--tds-toggle-switch-cursor);
1104
+ outline:var(--tds-toggle-switch-track-outline);
1105
+ outline-offset:var(--t-focus-ring-offset);
1106
+ background-color:transparent;
1107
+ border:0;
1108
+ border-radius:var(--t-border-radius-round);
1109
+ }
1110
+
1111
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1112
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1113
+ }
1114
+
1115
+ .tds-toggle-switch label{
1116
+ display:inline-flex;
1117
+ grid-area:1 / 2;
1118
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1119
+ column-gap:var(--tds-toggle-switch-column-gap);
1120
+ margin-top:-.09375em;
1121
+ font-size:var(--tds-toggle-switch-font-size);
1122
+ font-weight:var(--t-font-weight-normal);
1123
+ line-height:var(--tds-toggle-switch-line-height);
1124
+ color:var(--tds-toggle-switch-label-color);
1125
+ cursor:var(--tds-toggle-switch-cursor);
1126
+ }
1127
+
1128
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1129
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1130
+ }
1131
+
1132
+ .tds-toggle-switch:has(input:checked){
1133
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1134
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1135
+ }
1136
+
1137
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1138
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1139
+ }
1140
+
1141
+ .tds-toggle-switch:has(input:disabled){
1142
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1143
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1144
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1145
+ --tds-toggle-switch-cursor:not-allowed;
1146
+ }
1147
+
1148
+ .tds-toggle-switch-track{
1149
+ position:relative;
1150
+ flex-shrink:0;
1151
+ width:var(--tds-toggle-switch-track-width);
1152
+ height:var(--tds-toggle-switch-track-height);
1153
+ background-color:var(--tds-toggle-switch-track-background-color);
1154
+ border-radius:var(--t-border-radius-round);
1155
+ transition:var(--tds-toggle-switch-track-transition);
1156
+ }
1157
+
1158
+ .tds-toggle-switch-track::before{
1159
+ position:absolute;
1160
+ top:var(--t-spacing-fourth);
1161
+ left:var(--t-spacing-fourth);
1162
+ width:var(--tds-toggle-switch-thumb-size);
1163
+ height:var(--tds-toggle-switch-thumb-size);
1164
+ content:"";
1165
+ background-color:#fff;
1166
+ border-radius:var(--t-border-radius-round);
1167
+ transform:var(--tds-toggle-switch-thumb-transform);
1168
+ transition:var(--tds-toggle-switch-thumb-transition);
1169
+ }
1170
+
1171
+ @media (prefers-reduced-motion: reduce){
1172
+
1173
+ .tds-toggle-switch-track{
1174
+ --tds-toggle-switch-track-transition:none;
1175
+ --tds-toggle-switch-thumb-transition:none;
1176
+ }
1177
+ }
1178
+
1179
+ .tds-toggle-switch-description{
1180
+ display:flex;
1181
+ grid-area:2 / 2;
1182
+ align-items:flex-start;
1183
+ margin:0;
1184
+ font-size:var(--tds-toggle-switch-description-font-size);
1185
+ line-height:var(--tds-toggle-switch-description-line-height);
1186
+ color:var(--tds-toggle-switch-description-color);
1187
+ cursor:text;
1188
+ }
1189
+
1190
+ .tds-toggle-switch--sm{
1191
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1192
+ --tds-toggle-switch-line-height:1.35;
1193
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1194
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1195
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1196
+ --tds-toggle-switch-description-line-height:1.3;
1197
+ }
1198
+
1199
+ .tds-toggle-switch--hide-label{
1200
+ --tds-toggle-switch-display:inline-flex;
1201
+ }
1202
+
1203
+ .tds-input:has(textarea){
1204
+ --tds-input-padding-block:6px;
1205
+ --tds-input-resizer-size:var(--t-element-size-sm);
1206
+ --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");
1207
+ }
1208
+
1209
+ @supports (x: attr(x type(*))){
1210
+
1211
+ .tds-input:has(textarea){
1212
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1213
+ }
1214
+ }
1215
+
1216
+ .tds-input.tds-textarea--resize-vertical textarea{
1217
+ resize:vertical;
1218
+ }
1219
+
1220
+ .tds-input.tds-textarea--resize-none textarea{
1221
+ resize:none;
1222
+ }
1223
+
1224
+ .tds-input.tds-textarea--resize-auto textarea{
1225
+ resize:vertical;
1226
+ }
1227
+
1228
+ @supports (field-sizing: content){
1229
+ .tds-input.tds-textarea--resize-auto textarea{
1230
+ field-sizing:content;
1231
+ resize:none;
1232
+ }
1233
+ }
1234
+
1235
+ .tds-input textarea{
1236
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1237
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1238
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1239
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1240
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1241
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1242
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1243
+ --tds-input-scrollbar-thumb-border-radius:999px;
1244
+ --tds-input-scrollbar-thumb-border-width:3px;
1245
+ --tds-input-scrollbar-track-margin-block:.125rem;
1246
+ scrollbar-color:initial;
1247
+ transition-timing-function:var(--t-ease-in-out);
1248
+ transition-duration:var(--t-duration-200);
1249
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1250
+ }
1251
+
1252
+ @media (pointer: fine){
1253
+ :is(.tds-input textarea)::-webkit-scrollbar{
1254
+ width:12px;
1255
+ height:12px;
1256
+ cursor:default;
1257
+ }
1258
+
1259
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1260
+ cursor:default;
1261
+ background:var(--tds-input-scrollbar-thumb-color);
1262
+ background-clip:content-box;
1263
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1264
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1265
+ }
1266
+
1267
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1268
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1269
+ }
1270
+
1271
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1272
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1273
+ }
1274
+
1275
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1276
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1277
+ }
1278
+
1279
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1280
+ background:var(--tds-input-scrollbar-surface-color);
1281
+ }
1282
+
1283
+ :is(.tds-input textarea)::-webkit-resizer{
1284
+ background:var(--tds-input-resizer-icon) no-repeat;
1285
+ background-position:right bottom;
1286
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1287
+ }
1288
+
1289
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1290
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1291
+ cursor:default;
1292
+ }
1293
+
1294
+ @supports (-moz-appearance: none){
1295
+ :is(.tds-input textarea){
1296
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1297
+ scrollbar-width:thin;
1298
+ }
1299
+
1300
+ @media (hover){
1301
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1302
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1303
+ }
1304
+ }
1305
+ }
1306
+ }
1307
+
1308
+ .tds-select{
1309
+ --tds-select-border-color:var(--t-form-border-color);
1310
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
1311
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
1312
+ --tds-select-background-color:var(--t-form-background-color);
1313
+ --tds-select-color:var(--t-form-color);
1314
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
1315
+ --tds-select-font-size:var(--t-font-size-md);
1316
+ --tds-select-min-height:var(--t-container-size-md);
1317
+ --tds-select-padding-block:6px;
1318
+ --tds-select-description-color:var(--t-text-color-secondary);
1319
+ --tds-select-description-invalid-icon-display:none;
1320
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1321
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1322
+ --tds-select-caret-size:1em;
1323
+ --tds-select-caret-inline-offset:.75em;
1324
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1325
+
1326
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
1327
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
1328
+ --tds-select-dropdown-padding:var(--t-spacing-1);
1329
+ --tds-select-dropdown-margin-block:5px;
1330
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
1331
+ --tds-select-dropdown-scrollbar-width:thin;
1332
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
1333
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1334
+ --tds-select-dropdown-scroll-behavior:smooth;
1335
+ --tds-select-dropdown-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;
1336
+ --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1337
+ --tds-select-dropdown-closed-opacity:0;
1338
+ --tds-select-dropdown-open-opacity:1;
1339
+ --tds-select-dropdown-closed-transform:translateY(-8px);
1340
+ --tds-select-dropdown-open-transform:translateY(0);
1341
+
1342
+ --tds-select-option-gap:var(--t-spacing-1);
1343
+ --tds-select-option-padding-block:var(--t-spacing-1);
1344
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1345
+ --tds-select-option-font-size:1rem;
1346
+ --tds-select-option-color:var(--t-text-color);
1347
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1207
1348
  --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1208
1349
  --tds-select-option-border-radius:var(--t-border-radius);
1209
1350
 
@@ -1551,190 +1692,49 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1551
1692
  overflow:hidden;
1552
1693
  text-overflow:ellipsis;
1553
1694
  line-height:calc(var(--tds-select-min-height) - 2px);
1554
- white-space:nowrap;
1555
- }
1556
-
1557
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1558
- color:var(--tds-select-placeholder-color);
1559
- }
1560
-
1561
- :is(.tds-select select:has( > button))::picker(select){
1562
- inset:auto;
1563
- inline-size:-moz-max-content;
1564
- inline-size:max-content;
1565
- min-inline-size:anchor-size(width);
1566
- max-inline-size:100vi;
1567
- padding:var(--tds-select-dropdown-padding);
1568
- margin-block:var(--tds-select-dropdown-margin-block);
1569
- position-try-fallbacks:flip-block, flip-inline;
1570
- overflow:auto;
1571
- overflow-x:hidden;
1572
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1573
- -webkit-user-select:none;
1574
- -moz-user-select:none;
1575
- user-select:none;
1576
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1577
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1578
- background:var(--tds-select-dropdown-background-color);
1579
- border:var(--tds-select-dropdown-border);
1580
- border-radius:var(--tds-select-dropdown-border-radius);
1581
- box-shadow:var(--tds-select-dropdown-box-shadow);
1582
- opacity:var(--tds-select-dropdown-open-opacity);
1583
- transform:var(--tds-select-dropdown-open-transform);
1584
- transition:var(--tds-select-dropdown-transition-enter);
1585
- }
1586
-
1587
- :is(.tds-select select:has( > button)) option::checkmark{
1588
- display:none;
1589
- }
1590
-
1591
- @starting-style{
1592
- :is(.tds-select select:has( > button))::picker(select):popover-open{
1593
- opacity:var(--tds-select-dropdown-closed-opacity);
1594
- transform:var(--tds-select-dropdown-closed-transform);
1595
- }
1596
- }
1597
- }
1598
-
1599
- .tds-toggle-switch{
1600
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1601
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1602
- --tds-toggle-switch-cursor:pointer;
1603
- --tds-toggle-switch-display:inline-grid;
1604
- --tds-toggle-switch-line-height:1.4;
1605
-
1606
- --tds-toggle-switch-label-color:var(--t-form-color);
1607
-
1608
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1609
- --tds-toggle-switch-track-outline:none;
1610
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1611
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1612
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1613
-
1614
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1615
- --tds-toggle-switch-thumb-transform:translateX(0);
1616
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1617
-
1618
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1619
- --tds-toggle-switch-description-line-height:1.35;
1620
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1621
- position:relative;
1622
-
1623
- display:var(--tds-toggle-switch-display);
1624
- grid-template-columns:auto;
1625
- grid-auto-columns:1fr;
1626
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1627
- -webkit-user-select:none;
1628
- -moz-user-select:none;
1629
- user-select:none;
1630
- }
1631
-
1632
- .tds-toggle-switch input[type="checkbox"]{
1633
- position:absolute;
1634
- width:var(--tds-toggle-switch-track-width);
1635
- height:var(--tds-toggle-switch-track-height);
1636
- margin:0;
1637
- -webkit-appearance:none;
1638
- -moz-appearance:none;
1639
- appearance:none;
1640
- cursor:var(--tds-toggle-switch-cursor);
1641
- outline:var(--tds-toggle-switch-track-outline);
1642
- outline-offset:var(--t-focus-ring-offset);
1643
- background-color:transparent;
1644
- border:0;
1645
- border-radius:var(--t-border-radius-round);
1646
- }
1647
-
1648
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1649
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1650
- }
1651
-
1652
- .tds-toggle-switch label{
1653
- display:inline-flex;
1654
- grid-area:1 / 2;
1655
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1656
- column-gap:var(--tds-toggle-switch-column-gap);
1657
- margin-top:-.09375em;
1658
- font-size:var(--tds-toggle-switch-font-size);
1659
- font-weight:var(--t-font-weight-normal);
1660
- line-height:var(--tds-toggle-switch-line-height);
1661
- color:var(--tds-toggle-switch-label-color);
1662
- cursor:var(--tds-toggle-switch-cursor);
1663
- }
1664
-
1665
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1666
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1667
- }
1668
-
1669
- .tds-toggle-switch:has(input:checked){
1670
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1671
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1672
- }
1673
-
1674
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1675
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1676
- }
1677
-
1678
- .tds-toggle-switch:has(input:disabled){
1679
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1680
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1681
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1682
- --tds-toggle-switch-cursor:not-allowed;
1683
- }
1684
-
1685
- .tds-toggle-switch-track{
1686
- position:relative;
1687
- flex-shrink:0;
1688
- width:var(--tds-toggle-switch-track-width);
1689
- height:var(--tds-toggle-switch-track-height);
1690
- background-color:var(--tds-toggle-switch-track-background-color);
1691
- border-radius:var(--t-border-radius-round);
1692
- transition:var(--tds-toggle-switch-track-transition);
1693
- }
1694
-
1695
- .tds-toggle-switch-track::before{
1696
- position:absolute;
1697
- top:var(--t-spacing-fourth);
1698
- left:var(--t-spacing-fourth);
1699
- width:var(--tds-toggle-switch-thumb-size);
1700
- height:var(--tds-toggle-switch-thumb-size);
1701
- content:"";
1702
- background-color:#fff;
1703
- border-radius:var(--t-border-radius-round);
1704
- transform:var(--tds-toggle-switch-thumb-transform);
1705
- transition:var(--tds-toggle-switch-thumb-transition);
1706
- }
1707
-
1708
- @media (prefers-reduced-motion: reduce){
1709
-
1710
- .tds-toggle-switch-track{
1711
- --tds-toggle-switch-track-transition:none;
1712
- --tds-toggle-switch-thumb-transition:none;
1713
- }
1714
- }
1715
-
1716
- .tds-toggle-switch-description{
1717
- display:flex;
1718
- grid-area:2 / 2;
1719
- align-items:flex-start;
1720
- margin:0;
1721
- font-size:var(--tds-toggle-switch-description-font-size);
1722
- line-height:var(--tds-toggle-switch-description-line-height);
1723
- color:var(--tds-toggle-switch-description-color);
1724
- cursor:text;
1725
- }
1695
+ white-space:nowrap;
1696
+ }
1726
1697
 
1727
- .tds-toggle-switch--sm{
1728
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1729
- --tds-toggle-switch-line-height:1.35;
1730
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1731
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1732
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1733
- --tds-toggle-switch-description-line-height:1.3;
1734
- }
1698
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1699
+ color:var(--tds-select-placeholder-color);
1700
+ }
1735
1701
 
1736
- .tds-toggle-switch--hide-label{
1737
- --tds-toggle-switch-display:inline-flex;
1702
+ :is(.tds-select select:has( > button))::picker(select){
1703
+ inset:auto;
1704
+ inline-size:-moz-max-content;
1705
+ inline-size:max-content;
1706
+ min-inline-size:anchor-size(width);
1707
+ max-inline-size:100vi;
1708
+ padding:var(--tds-select-dropdown-padding);
1709
+ margin-block:var(--tds-select-dropdown-margin-block);
1710
+ position-try-fallbacks:flip-block, flip-inline;
1711
+ overflow:auto;
1712
+ overflow-x:hidden;
1713
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1714
+ -webkit-user-select:none;
1715
+ -moz-user-select:none;
1716
+ user-select:none;
1717
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1718
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1719
+ background:var(--tds-select-dropdown-background-color);
1720
+ border:var(--tds-select-dropdown-border);
1721
+ border-radius:var(--tds-select-dropdown-border-radius);
1722
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1723
+ opacity:var(--tds-select-dropdown-open-opacity);
1724
+ transform:var(--tds-select-dropdown-open-transform);
1725
+ transition:var(--tds-select-dropdown-transition-enter);
1726
+ }
1727
+
1728
+ :is(.tds-select select:has( > button)) option::checkmark{
1729
+ display:none;
1730
+ }
1731
+
1732
+ @starting-style{
1733
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1734
+ opacity:var(--tds-select-dropdown-closed-opacity);
1735
+ transform:var(--tds-select-dropdown-closed-transform);
1736
+ }
1737
+ }
1738
1738
  }
1739
1739
 
1740
1740
  .tds-input{
@@ -3317,7 +3317,289 @@ a[class="tds-btn"]{
3317
3317
  }
3318
3318
  }
3319
3319
 
3320
- @media (prefers-color-scheme: dark){
3320
+ @media (prefers-color-scheme: dark){
3321
+ }
3322
+
3323
+ .tds-combo-box{
3324
+ --tds-combo-box-border-color:var(--t-form-border-color);
3325
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3326
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3327
+ --tds-combo-box-background-color:var(--t-form-background-color);
3328
+ --tds-combo-box-color:var(--t-form-color);
3329
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3330
+ --tds-combo-box-font-size:var(--t-font-size-md);
3331
+ --tds-combo-box-min-height:var(--t-container-size-md);
3332
+ --tds-combo-box-padding-block:6px;
3333
+ --tds-combo-box-button-offset:4px;
3334
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
3335
+ --tds-combo-box-description-invalid-icon-display:none;
3336
+
3337
+ position:relative;
3338
+ display:flex;
3339
+ flex-direction:column;
3340
+ gap:var(--t-spacing-half);
3341
+ }
3342
+
3343
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
3344
+ margin-left:.25ch;
3345
+ color:var(--t-text-color-status-error);
3346
+ content:"*";
3347
+ }
3348
+
3349
+ .tds-combo-box[data-invalid]{
3350
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
3351
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3352
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3353
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
3354
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
3355
+ --tds-combo-box-description-invalid-icon-display:inline-block;
3356
+ }
3357
+
3358
+ .tds-combo-box[data-disabled]{
3359
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3360
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3361
+ --tds-combo-box-color:var(--t-form-color-disabled);
3362
+ }
3363
+
3364
+ .tds-combo-box[data-disabled] .tds-combo-box-label{
3365
+ color:var(--t-form-color-disabled);
3366
+ }
3367
+
3368
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
3369
+ cursor:not-allowed;
3370
+ }
3371
+
3372
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
3373
+ transform:rotate(.5turn);
3374
+ }
3375
+
3376
+ .tds-combo-box--lg{
3377
+ --tds-combo-box-min-height:var(--t-container-size-lg);
3378
+ --tds-combo-box-font-size:var(--t-font-size-lg);
3379
+ --tds-combo-box-button-offset:5px;
3380
+ }
3381
+
3382
+ .tds-combo-box-label{
3383
+ font-size:var(--t-font-size-md);
3384
+ font-weight:var(--t-font-weight-normal);
3385
+ color:var(--t-text-color);
3386
+ cursor:default;
3387
+ }
3388
+
3389
+ .tds-combo-box-field{
3390
+ display:flex;
3391
+ align-items:center;
3392
+ inline-size:100%;
3393
+ min-block-size:var(--tds-combo-box-min-height);
3394
+ font-family:inherit;
3395
+ font-size:var(--tds-combo-box-font-size);
3396
+ line-height:1;
3397
+ color:var(--tds-combo-box-color);
3398
+ -webkit-appearance:none;
3399
+ -moz-appearance:none;
3400
+ appearance:none;
3401
+ cursor:default;
3402
+ outline:var(--t-focus-ring-width) solid transparent;
3403
+ outline-offset:0;
3404
+ background-color:var(--tds-combo-box-background-color);
3405
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3406
+ border-radius:var(--t-form-border-radius);
3407
+ }
3408
+
3409
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3410
+ border-color:var(--tds-combo-box-border-color-hover);
3411
+ }
3412
+
3413
+ .tds-combo-box-field[data-focus-within]{
3414
+ outline-color:var(--t-focus-ring-color);
3415
+ outline-offset:var(--t-focus-ring-offset);
3416
+ border-color:var(--tds-combo-box-border-color-active);
3417
+ }
3418
+
3419
+ .tds-combo-box-field:has([readonly]){
3420
+ --tds-input-border-color:var(--t-form-border-color-readonly);
3421
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3422
+ }
3423
+
3424
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
3425
+ border-color:var(--t-form-border-color-hover);
3426
+ }
3427
+
3428
+ .tds-combo-box-input{
3429
+ display:flex;
3430
+ flex:1;
3431
+ align-items:center;
3432
+ padding-block:var(--tds-combo-box-padding-block);
3433
+ padding-inline-start:var(--t-spacing-1);
3434
+ font-family:inherit;
3435
+ font-size:inherit;
3436
+ color:inherit;
3437
+ outline:0;
3438
+ background:transparent;
3439
+ border:0;
3440
+ }
3441
+
3442
+ .tds-combo-box-input::-moz-placeholder{
3443
+ color:var(--tds-combo-box-placeholder-color);
3444
+ -moz-user-select:none;
3445
+ user-select:none;
3446
+ }
3447
+
3448
+ .tds-combo-box-input::placeholder{
3449
+ color:var(--tds-combo-box-placeholder-color);
3450
+ -webkit-user-select:none;
3451
+ -moz-user-select:none;
3452
+ user-select:none;
3453
+ }
3454
+
3455
+ .tds-combo-box-button{
3456
+ flex-shrink:0;
3457
+ align-self:center;
3458
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3459
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3460
+ padding:0;
3461
+ margin-inline-end:var(--tds-combo-box-button-offset);
3462
+ }
3463
+
3464
+ .tds-combo-box-button > svg{
3465
+ inline-size:var(--tds-combo-box-font-size);
3466
+ block-size:var(--tds-combo-box-font-size);
3467
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
3468
+ }
3469
+
3470
+ .tds-combo-box-button:not(.tds-btn){
3471
+ display:inline-flex;
3472
+ align-items:center;
3473
+ justify-content:center;
3474
+ inline-size:auto;
3475
+ block-size:auto;
3476
+ margin-inline-end:.75em;
3477
+ color:var(--t-icon-color);
3478
+ cursor:default;
3479
+ background:transparent;
3480
+ border:0;
3481
+ }
3482
+
3483
+ .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3484
+ outline:0;
3485
+ }
3486
+
3487
+ .tds-combo-box-popover{
3488
+ width:var(--trigger-width);
3489
+ max-block-size:inherit;
3490
+ padding:var(--t-spacing-1);
3491
+ overflow:auto;
3492
+ outline:0;
3493
+ scrollbar-color:#0004 #0000;
3494
+ scrollbar-width:thin;
3495
+ background:var(--t-surface-color-card);
3496
+ background-clip:padding-box;
3497
+ border:1px solid var(--t-border-color);
3498
+ border-radius:var(--t-border-radius);
3499
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3500
+ }
3501
+
3502
+ .tds-combo-box-popover[data-entering]{
3503
+ animation:tds-combo-box-popover-enter 160ms ease;
3504
+ }
3505
+
3506
+ .tds-combo-box-popover[data-exiting]{
3507
+ animation:tds-combo-box-popover-exit 130ms ease;
3508
+ }
3509
+
3510
+ @keyframes tds-combo-box-popover-enter{
3511
+ from{
3512
+ opacity:0;
3513
+ transform:translateY(-8px);
3514
+ }
3515
+ }
3516
+
3517
+ @keyframes tds-combo-box-popover-exit{
3518
+ to{
3519
+ opacity:0;
3520
+ transform:translateY(-8px);
3521
+ }
3522
+ }
3523
+
3524
+ @media (prefers-reduced-motion: reduce){
3525
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3526
+ animation:none;
3527
+ }
3528
+
3529
+ .tds-combo-box-button > svg{
3530
+ transition:none;
3531
+ }
3532
+ }
3533
+
3534
+ .tds-combo-box-list{
3535
+ padding:0;
3536
+ margin:0;
3537
+ }
3538
+
3539
+ .tds-combo-box-list-item{
3540
+ display:block;
3541
+ padding-block:var(--t-spacing-1);
3542
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3543
+ overflow:hidden;
3544
+ text-overflow:ellipsis;
3545
+ font-size:1rem;
3546
+ color:var(--t-text-color);
3547
+ white-space:nowrap;
3548
+ cursor:default;
3549
+ outline-offset:-1px;
3550
+ border-radius:var(--t-border-radius);
3551
+ }
3552
+
3553
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3554
+ background:var(--t-fill-color-neutral-070);
3555
+ }
3556
+
3557
+ .tds-combo-box-list-item[data-selected]{
3558
+ background:var(--t-fill-color-button-interaction-ghost-active);
3559
+ }
3560
+
3561
+ .tds-combo-box-list-item[data-focus-visible]{
3562
+ outline:var(--t-focus-ring-outline);
3563
+ outline-offset:-1px;
3564
+ }
3565
+
3566
+ .tds-combo-box-list-item[data-disabled]{
3567
+ color:var(--t-form-color-disabled);
3568
+ cursor:not-allowed;
3569
+ }
3570
+
3571
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3572
+ background:transparent;
3573
+ }
3574
+
3575
+ .tds-combo-box-list-section:not(:first-child){
3576
+ margin-block-start:var(--t-spacing-half);
3577
+ }
3578
+
3579
+ .tds-combo-box-section-header{
3580
+ padding-block:var(--t-spacing-1);
3581
+ padding-inline:var(--t-spacing-1);
3582
+ font-size:var(--t-font-size-sm);
3583
+ font-weight:var(--t-font-weight-semibold);
3584
+ color:var(--t-text-color-secondary);
3585
+ }
3586
+
3587
+ .tds-combo-box-description{
3588
+ display:flex;
3589
+ gap:var(--t-spacing-half);
3590
+ align-items:flex-start;
3591
+ margin:0;
3592
+ font-size:var(--t-font-size-sm);
3593
+ line-height:1.35;
3594
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3595
+ cursor:text;
3596
+ }
3597
+
3598
+ .tds-combo-box-description-invalid-icon{
3599
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3600
+ flex-shrink:0;
3601
+ margin-block-start:calc(.5lh - .5em);
3602
+ line-height:1.35;
3321
3603
  }
3322
3604
 
3323
3605
  .tds-date-picker{
@@ -3330,6 +3612,7 @@ a[class="tds-btn"]{
3330
3612
  --tds-date-picker-font-size:var(--t-font-size-md);
3331
3613
  --tds-date-picker-min-height:var(--t-container-size-md);
3332
3614
  --tds-date-picker-padding-block:6px;
3615
+ --tds-date-picker-button-offset:4px;
3333
3616
  --tds-date-picker-description-color:var(--t-text-color-secondary);
3334
3617
  --tds-date-picker-description-invalid-icon-display:none;
3335
3618
 
@@ -3368,6 +3651,7 @@ a[class="tds-btn"]{
3368
3651
  .tds-date-picker--lg{
3369
3652
  --tds-date-picker-min-height:var(--t-container-size-lg);
3370
3653
  --tds-date-picker-font-size:var(--t-font-size-lg);
3654
+ --tds-date-picker-button-offset:5px;
3371
3655
  }
3372
3656
 
3373
3657
  .tds-date-picker-label{
@@ -3470,39 +3754,14 @@ a[class="tds-btn"]{
3470
3754
  }
3471
3755
 
3472
3756
  .tds-date-picker-button{
3473
- display:flex;
3474
3757
  flex-shrink:0;
3475
- align-items:center;
3476
3758
  align-self:center;
3477
- justify-content:center;
3478
- padding:2px;
3479
- margin-inline-end:var(--t-spacing-half);
3480
- color:var(--tds-date-picker-color);
3481
- cursor:default;
3482
- outline:0;
3483
- background:transparent;
3484
- border:0;
3485
- border-radius:var(--t-border-radius-sm);
3759
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3760
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3761
+ padding:0;
3762
+ margin-inline-end:var(--tds-date-picker-button-offset);
3486
3763
  }
3487
3764
 
3488
- .tds-date-picker-button[data-hovered]{
3489
- background:var(--t-fill-color-neutral-070);
3490
- }
3491
-
3492
- .tds-date-picker-button[data-pressed]{
3493
- background:var(--t-fill-color-button-interaction-ghost-active);
3494
- }
3495
-
3496
- .tds-date-picker-button[data-focus-visible]{
3497
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3498
- outline-offset:var(--t-focus-ring-offset);
3499
- }
3500
-
3501
- .tds-date-picker-button[data-disabled]{
3502
- color:var(--t-form-color-disabled);
3503
- cursor:not-allowed;
3504
- }
3505
-
3506
3765
  .tds-date-picker-popover{
3507
3766
  padding:var(--t-spacing-2);
3508
3767
  background:var(--t-surface-color-card);
@@ -3633,243 +3892,99 @@ a[class="tds-btn"]{
3633
3892
  outline-offset:var(--t-focus-ring-offset);
3634
3893
  }
3635
3894
 
3636
- .tds-date-picker-calendar-cell[data-unavailable]{
3637
- color:var(--t-text-color-secondary);
3638
- text-decoration:line-through;
3639
- cursor:not-allowed;
3640
- }
3641
-
3642
- .tds-date-picker-calendar-cell[data-disabled]{
3643
- color:var(--t-form-color-disabled);
3644
- cursor:not-allowed;
3645
- }
3646
-
3647
- .tds-date-picker-calendar-cell[data-outside-month]{
3648
- color:var(--t-text-color-secondary);
3649
- }
3650
-
3651
- .tds-checkbox-group{
3652
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3653
- --tds-checkbox-group-line-height:1.4;
3654
- --tds-checkbox-group-gap:var(--t-spacing-1);
3655
-
3656
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3657
-
3658
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3659
- --tds-checkbox-group-description-line-height:1.35;
3660
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3661
- --tds-checkbox-group-description-invalid-icon-display:none;
3662
- display:flex;
3663
- flex-direction:column;
3664
- gap:var(--tds-checkbox-group-gap);
3665
- padding:0;
3666
- margin:0;
3667
-
3668
- font-size:var(--tds-checkbox-group-font-size);
3669
- line-height:var(--tds-checkbox-group-line-height);
3670
- border:0;
3671
- }
3672
-
3673
- .tds-checkbox-group legend{
3674
- padding:0;
3675
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3676
- }
3677
-
3678
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3679
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3680
- }
3681
-
3682
- .tds-checkbox-group[aria-invalid="true"]{
3683
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3684
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3685
- }
3686
-
3687
- .tds-checkbox-group:has(input:required) legend::after{
3688
- margin-left:.25ch;
3689
- color:var(--t-text-color-status-error);
3690
- content:"*";
3691
- }
3692
-
3693
- .tds-checkbox-group-fields{
3694
- display:flex;
3695
- flex-direction:column;
3696
- gap:var(--tds-checkbox-group-gap);
3697
- align-items:flex-start;
3698
- }
3699
-
3700
- .tds-checkbox-group-description{
3701
- display:flex;
3702
- gap:var(--t-spacing-half);
3703
- align-items:flex-start;
3704
- margin:0;
3705
- font-size:var(--tds-checkbox-group-description-font-size);
3706
- line-height:var(--tds-checkbox-group-description-line-height);
3707
- color:var(--tds-checkbox-group-description-color);
3708
- cursor:text;
3709
- }
3710
-
3711
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3712
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3713
- flex-shrink:0;
3714
- margin-top:calc(.5lh - .5em);
3715
- line-height:var(--tds-checkbox-group-description-line-height);
3716
- }
3717
-
3718
- .tds-checkbox-group--sm{
3719
- --tds-checkbox-group-line-height:1.35;
3720
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3721
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3722
- --tds-checkbox-group-description-line-height:1.3;
3723
- }
3724
-
3725
- .tds-time-field{
3726
- --tds-time-field-border-color:var(--t-form-border-color);
3727
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3728
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3729
- --tds-time-field-background-color:var(--t-form-background-color);
3730
- --tds-time-field-color:var(--t-form-color);
3731
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3732
- --tds-time-field-font-size:var(--t-font-size-md);
3733
- --tds-time-field-min-height:var(--t-container-size-md);
3734
- --tds-time-field-padding-block:6px;
3735
- --tds-time-field-description-color:var(--t-text-color-secondary);
3736
- --tds-time-field-description-invalid-icon-display:none;
3737
-
3738
- position:relative;
3739
- display:flex;
3740
- flex-direction:column;
3741
- gap:var(--t-spacing-half);
3742
- }
3743
-
3744
- .tds-time-field[data-required] .tds-time-field-label::after{
3745
- margin-left:.25ch;
3746
- color:var(--t-text-color-status-error);
3747
- content:"*";
3748
- }
3749
-
3750
- .tds-time-field[data-invalid]{
3751
- --tds-time-field-border-color:var(--t-form-border-color-error);
3752
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3753
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3754
- --tds-time-field-background-color:var(--t-form-background-color-error);
3755
- --tds-time-field-description-color:var(--t-text-color-status-error);
3756
- --tds-time-field-description-invalid-icon-display:inline-block;
3757
- }
3758
-
3759
- .tds-time-field[data-disabled]{
3760
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3761
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3762
- --tds-time-field-color:var(--t-form-color-disabled);
3763
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3764
- }
3765
-
3766
- .tds-time-field[data-disabled] .tds-time-field-label{
3767
- color:var(--t-form-color-disabled);
3768
- }
3769
-
3770
- .tds-time-field[data-disabled] .tds-time-field-input{
3771
- cursor:not-allowed;
3772
- }
3773
-
3774
- .tds-time-field--lg{
3775
- --tds-time-field-min-height:var(--t-container-size-lg);
3776
- --tds-time-field-font-size:var(--t-font-size-lg);
3777
- }
3778
-
3779
- .tds-time-field-label{
3780
- font-size:var(--t-font-size-md);
3781
- font-weight:var(--t-font-weight-normal);
3782
- color:var(--t-text-color);
3783
- cursor:default;
3784
- }
3785
-
3786
- .tds-time-field-input{
3787
- display:flex;
3788
- align-items:center;
3789
- inline-size:100%;
3790
- min-block-size:var(--tds-time-field-min-height);
3791
- padding-block:var(--tds-time-field-padding-block);
3792
- padding-inline:var(--t-spacing-1);
3793
- font-family:inherit;
3794
- font-size:var(--tds-time-field-font-size);
3795
- font-variant-numeric:tabular-nums;
3796
- line-height:1;
3797
- color:var(--tds-time-field-color);
3798
- cursor:text;
3799
- outline:var(--t-focus-ring-width) solid transparent;
3800
- outline-offset:0;
3801
- background-color:var(--tds-time-field-background-color);
3802
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3803
- border-radius:var(--t-form-border-radius);
3804
- }
3805
-
3806
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3807
- border-color:var(--tds-time-field-border-color-hover);
3895
+ .tds-date-picker-calendar-cell[data-unavailable]{
3896
+ color:var(--t-text-color-secondary);
3897
+ text-decoration:line-through;
3898
+ cursor:not-allowed;
3808
3899
  }
3809
3900
 
3810
- .tds-time-field-input[data-focus-within]{
3811
- outline-color:var(--t-focus-ring-color);
3812
- outline-offset:var(--t-focus-ring-offset);
3813
- border-color:var(--tds-time-field-border-color-active);
3901
+ .tds-date-picker-calendar-cell[data-disabled]{
3902
+ color:var(--t-form-color-disabled);
3903
+ cursor:not-allowed;
3814
3904
  }
3815
3905
 
3816
- .tds-time-field-input[data-readonly]{
3817
- color:var(--t-form-color-readonly);
3818
- background-color:var(--t-form-background-color-readonly);
3819
- border-color:var(--t-form-border-color-readonly);
3906
+ .tds-date-picker-calendar-cell[data-outside-month]{
3907
+ color:var(--t-text-color-secondary);
3820
3908
  }
3821
3909
 
3822
- .tds-time-field-input[data-readonly][data-hovered]{
3823
- border-color:var(--t-form-border-color-readonly);
3824
- }
3910
+ .tds-checkbox-group{
3911
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3912
+ --tds-checkbox-group-line-height:1.4;
3913
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3825
3914
 
3826
- .tds-time-field-input[data-readonly][data-focus-within]{
3827
- outline-color:var(--t-focus-ring-color);
3828
- outline-offset:var(--t-focus-ring-offset);
3829
- border-color:var(--t-form-border-color-hover);
3830
- }
3915
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3831
3916
 
3832
- .tds-time-field-segment{
3833
- padding-inline:1px;
3834
- font-variant-numeric:tabular-nums;
3835
- cursor:text;
3836
- caret-color:transparent;
3837
- border-radius:var(--t-border-radius-sm);
3917
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3918
+ --tds-checkbox-group-description-line-height:1.35;
3919
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3920
+ --tds-checkbox-group-description-invalid-icon-display:none;
3921
+ display:flex;
3922
+ flex-direction:column;
3923
+ gap:var(--tds-checkbox-group-gap);
3924
+ padding:0;
3925
+ margin:0;
3926
+
3927
+ font-size:var(--tds-checkbox-group-font-size);
3928
+ line-height:var(--tds-checkbox-group-line-height);
3929
+ border:0;
3838
3930
  }
3839
3931
 
3840
- .tds-time-field-segment[data-placeholder]{
3841
- color:var(--tds-time-field-placeholder-color);
3932
+ .tds-checkbox-group legend{
3933
+ padding:0;
3934
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3842
3935
  }
3843
3936
 
3844
- .tds-time-field-segment[data-focused]{
3845
- color:var(--t-text-color-inverted);
3846
- outline:0;
3847
- background:var(--t-fill-color-interaction);
3937
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3938
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3848
3939
  }
3849
3940
 
3850
- .tds-time-field-segment-separator{
3851
- padding-inline:0;
3852
- color:var(--tds-time-field-placeholder-color);
3941
+ .tds-checkbox-group[aria-invalid="true"]{
3942
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3943
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3944
+ }
3945
+
3946
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3947
+ margin-left:.25ch;
3948
+ color:var(--t-text-color-status-error);
3949
+ content:"*";
3950
+ }
3951
+
3952
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3953
+ content:none;
3954
+ }
3955
+
3956
+ .tds-checkbox-group-fields{
3957
+ display:flex;
3958
+ flex-direction:column;
3959
+ gap:var(--tds-checkbox-group-gap);
3960
+ align-items:flex-start;
3853
3961
  }
3854
3962
 
3855
- .tds-time-field-description{
3963
+ .tds-checkbox-group-description{
3856
3964
  display:flex;
3857
3965
  gap:var(--t-spacing-half);
3858
3966
  align-items:flex-start;
3859
3967
  margin:0;
3860
- font-size:var(--t-font-size-sm);
3861
- line-height:1.35;
3862
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3968
+ font-size:var(--tds-checkbox-group-description-font-size);
3969
+ line-height:var(--tds-checkbox-group-description-line-height);
3970
+ color:var(--tds-checkbox-group-description-color);
3863
3971
  cursor:text;
3864
3972
  }
3865
3973
 
3866
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3867
- display:var(--tds-time-field-description-invalid-icon-display, none);
3974
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3975
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3868
3976
  flex-shrink:0;
3869
- margin-block-start:calc(.5lh - .5em);
3870
- line-height:1.35;
3977
+ margin-top:calc(.5lh - .5em);
3978
+ line-height:var(--tds-checkbox-group-description-line-height);
3871
3979
  }
3872
3980
 
3981
+ .tds-checkbox-group--sm{
3982
+ --tds-checkbox-group-line-height:1.35;
3983
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3984
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3985
+ --tds-checkbox-group-description-line-height:1.3;
3986
+ }
3987
+
3873
3988
  .tds-number-stepper{
3874
3989
  --tds-number-stepper-border-color:var(--t-form-border-color);
3875
3990
  --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
@@ -3961,177 +4076,24 @@ a[class="tds-btn"]{
3961
4076
  .tds-number-stepper-field[data-focus-within]{
3962
4077
  outline-color:var(--t-focus-ring-color);
3963
4078
  outline-offset:var(--t-focus-ring-offset);
3964
- border-color:var(--tds-number-stepper-border-color-active);
3965
- }
3966
-
3967
- .tds-number-stepper-field:has([readonly]){
3968
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3969
- }
3970
-
3971
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
3972
- border-color:var(--t-form-border-color-hover);
3973
- }
3974
-
3975
- .tds-number-stepper-input{
3976
- display:flex;
3977
- flex:1;
3978
- align-items:center;
3979
- min-inline-size:0;
3980
- padding-block:var(--tds-number-stepper-padding-block);
3981
- padding-inline:var(--t-spacing-1);
3982
- font-family:inherit;
3983
- font-size:inherit;
3984
- color:inherit;
3985
- outline:0;
3986
- background:transparent;
3987
- border:0;
3988
- }
3989
-
3990
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3991
- margin:0;
3992
- -webkit-appearance:none;
3993
- appearance:none;
3994
- }
3995
-
3996
- .tds-number-stepper-button{
3997
- flex-shrink:0;
3998
- align-self:center;
3999
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4000
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4001
- padding:0;
4002
- }
4003
-
4004
- .tds-number-stepper-button:last-of-type{
4005
- margin-inline-end:var(--tds-number-stepper-button-offset);
4006
- }
4007
-
4008
- .tds-number-stepper-description{
4009
- display:flex;
4010
- gap:var(--t-spacing-half);
4011
- align-items:flex-start;
4012
- margin:0;
4013
- font-size:var(--t-font-size-sm);
4014
- line-height:1.35;
4015
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4016
- cursor:text;
4017
- }
4018
-
4019
- .tds-number-stepper-description-invalid-icon{
4020
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
4021
- flex-shrink:0;
4022
- margin-block-start:calc(.5lh - .5em);
4023
- line-height:1.35;
4024
- }
4025
-
4026
- .tds-combo-box{
4027
- --tds-combo-box-border-color:var(--t-form-border-color);
4028
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
4029
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
4030
- --tds-combo-box-background-color:var(--t-form-background-color);
4031
- --tds-combo-box-color:var(--t-form-color);
4032
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
4033
- --tds-combo-box-font-size:var(--t-font-size-md);
4034
- --tds-combo-box-min-height:var(--t-container-size-md);
4035
- --tds-combo-box-padding-block:6px;
4036
- --tds-combo-box-description-color:var(--t-text-color-secondary);
4037
- --tds-combo-box-description-invalid-icon-display:none;
4038
-
4039
- position:relative;
4040
- display:flex;
4041
- flex-direction:column;
4042
- gap:var(--t-spacing-half);
4043
- }
4044
-
4045
- .tds-combo-box[data-required] .tds-combo-box-label::after{
4046
- margin-left:.25ch;
4047
- color:var(--t-text-color-status-error);
4048
- content:"*";
4049
- }
4050
-
4051
- .tds-combo-box[data-invalid]{
4052
- --tds-combo-box-border-color:var(--t-form-border-color-error);
4053
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
4054
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
4055
- --tds-combo-box-background-color:var(--t-form-background-color-error);
4056
- --tds-combo-box-description-color:var(--t-text-color-status-error);
4057
- --tds-combo-box-description-invalid-icon-display:inline-block;
4058
- }
4059
-
4060
- .tds-combo-box[data-disabled]{
4061
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
4062
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
4063
- --tds-combo-box-color:var(--t-form-color-disabled);
4064
- }
4065
-
4066
- .tds-combo-box[data-disabled] .tds-combo-box-label{
4067
- color:var(--t-form-color-disabled);
4068
- }
4069
-
4070
- .tds-combo-box[data-disabled] .tds-combo-box-field{
4071
- cursor:not-allowed;
4072
- }
4073
-
4074
- .tds-combo-box[data-open] .tds-combo-box-button{
4075
- transform:rotate(.5turn);
4076
- }
4077
-
4078
- .tds-combo-box--lg{
4079
- --tds-combo-box-min-height:var(--t-container-size-lg);
4080
- --tds-combo-box-font-size:var(--t-font-size-lg);
4081
- }
4082
-
4083
- .tds-combo-box-label{
4084
- font-size:var(--t-font-size-md);
4085
- font-weight:var(--t-font-weight-normal);
4086
- color:var(--t-text-color);
4087
- cursor:default;
4088
- }
4089
-
4090
- .tds-combo-box-field{
4091
- display:flex;
4092
- align-items:center;
4093
- inline-size:100%;
4094
- min-block-size:var(--tds-combo-box-min-height);
4095
- font-family:inherit;
4096
- font-size:var(--tds-combo-box-font-size);
4097
- line-height:1;
4098
- color:var(--tds-combo-box-color);
4099
- -webkit-appearance:none;
4100
- -moz-appearance:none;
4101
- appearance:none;
4102
- cursor:default;
4103
- outline:var(--t-focus-ring-width) solid transparent;
4104
- outline-offset:0;
4105
- background-color:var(--tds-combo-box-background-color);
4106
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
4107
- border-radius:var(--t-form-border-radius);
4108
- }
4109
-
4110
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4111
- border-color:var(--tds-combo-box-border-color-hover);
4112
- }
4113
-
4114
- .tds-combo-box-field[data-focus-within]{
4115
- outline-color:var(--t-focus-ring-color);
4116
- outline-offset:var(--t-focus-ring-offset);
4117
- border-color:var(--tds-combo-box-border-color-active);
4079
+ border-color:var(--tds-number-stepper-border-color-active);
4118
4080
  }
4119
4081
 
4120
- .tds-combo-box-field:has([readonly]){
4121
- --tds-input-border-color:var(--t-form-border-color-readonly);
4122
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
4082
+ .tds-number-stepper-field:has([readonly]){
4083
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
4123
4084
  }
4124
4085
 
4125
- .tds-combo-box-field[data-focus-within]:has([readonly]){
4086
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
4126
4087
  border-color:var(--t-form-border-color-hover);
4127
4088
  }
4128
4089
 
4129
- .tds-combo-box-input{
4090
+ .tds-number-stepper-input{
4130
4091
  display:flex;
4131
4092
  flex:1;
4132
4093
  align-items:center;
4133
- padding-block:var(--tds-combo-box-padding-block);
4134
- padding-inline-start:var(--t-spacing-1);
4094
+ min-inline-size:0;
4095
+ padding-block:var(--tds-number-stepper-padding-block);
4096
+ padding-inline:var(--t-spacing-1);
4135
4097
  font-family:inherit;
4136
4098
  font-size:inherit;
4137
4099
  color:inherit;
@@ -4140,171 +4102,189 @@ a[class="tds-btn"]{
4140
4102
  border:0;
4141
4103
  }
4142
4104
 
4143
- .tds-combo-box-input::-moz-placeholder{
4144
- color:var(--tds-combo-box-placeholder-color);
4145
- -moz-user-select:none;
4146
- user-select:none;
4147
- }
4148
-
4149
- .tds-combo-box-input::placeholder{
4150
- color:var(--tds-combo-box-placeholder-color);
4151
- -webkit-user-select:none;
4152
- -moz-user-select:none;
4153
- user-select:none;
4105
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4106
+ margin:0;
4107
+ -webkit-appearance:none;
4108
+ appearance:none;
4154
4109
  }
4155
4110
 
4156
- .tds-combo-box-button{
4157
- display:flex;
4111
+ .tds-number-stepper-button{
4158
4112
  flex-shrink:0;
4159
- align-items:center;
4160
4113
  align-self:center;
4161
- justify-content:center;
4162
- padding:2px;
4163
- margin-inline-end:var(--t-spacing-half);
4164
- color:var(--tds-combo-box-color);
4165
- cursor:default;
4166
- outline:0;
4167
- background:transparent;
4168
- border:0;
4169
- border-radius:var(--t-border-radius-sm);
4170
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
4114
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4115
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4116
+ padding:0;
4171
4117
  }
4172
4118
 
4173
- .tds-combo-box-button[data-hovered]{
4174
- background:var(--t-fill-color-neutral-070);
4119
+ .tds-number-stepper-button:last-of-type{
4120
+ margin-inline-end:var(--tds-number-stepper-button-offset);
4175
4121
  }
4176
4122
 
4177
- .tds-combo-box-button[data-pressed]{
4178
- background:var(--t-fill-color-button-interaction-ghost-active);
4179
- }
4123
+ .tds-number-stepper-description{
4124
+ display:flex;
4125
+ gap:var(--t-spacing-half);
4126
+ align-items:flex-start;
4127
+ margin:0;
4128
+ font-size:var(--t-font-size-sm);
4129
+ line-height:1.35;
4130
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4131
+ cursor:text;
4132
+ }
4180
4133
 
4181
- .tds-combo-box-button[data-focus-visible]{
4182
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4183
- outline-offset:var(--t-focus-ring-offset);
4184
- }
4134
+ .tds-number-stepper-description-invalid-icon{
4135
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
4136
+ flex-shrink:0;
4137
+ margin-block-start:calc(.5lh - .5em);
4138
+ line-height:1.35;
4139
+ }
4185
4140
 
4186
- .tds-combo-box-button[data-disabled]{
4187
- color:var(--t-form-color-disabled);
4188
- cursor:not-allowed;
4189
- }
4141
+ .tds-time-field{
4142
+ --tds-time-field-border-color:var(--t-form-border-color);
4143
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4144
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4145
+ --tds-time-field-background-color:var(--t-form-background-color);
4146
+ --tds-time-field-color:var(--t-form-color);
4147
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4148
+ --tds-time-field-font-size:var(--t-font-size-md);
4149
+ --tds-time-field-min-height:var(--t-container-size-md);
4150
+ --tds-time-field-padding-block:6px;
4151
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4152
+ --tds-time-field-description-invalid-icon-display:none;
4190
4153
 
4191
- .tds-combo-box-popover{
4192
- width:var(--trigger-width);
4193
- max-block-size:inherit;
4194
- padding:var(--t-spacing-1);
4195
- overflow:auto;
4196
- outline:0;
4197
- scrollbar-color:#0004 #0000;
4198
- scrollbar-width:thin;
4199
- background:var(--t-surface-color-card);
4200
- background-clip:padding-box;
4201
- border:1px solid var(--t-border-color);
4202
- border-radius:var(--t-border-radius);
4203
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4154
+ position:relative;
4155
+ display:flex;
4156
+ flex-direction:column;
4157
+ gap:var(--t-spacing-half);
4204
4158
  }
4205
4159
 
4206
- .tds-combo-box-popover[data-entering]{
4207
- animation:tds-combo-box-popover-enter 160ms ease;
4208
- }
4209
-
4210
- .tds-combo-box-popover[data-exiting]{
4211
- animation:tds-combo-box-popover-exit 130ms ease;
4160
+ .tds-time-field[data-required] .tds-time-field-label::after{
4161
+ margin-left:.25ch;
4162
+ color:var(--t-text-color-status-error);
4163
+ content:"*";
4212
4164
  }
4213
4165
 
4214
- @keyframes tds-combo-box-popover-enter{
4215
- from{
4216
- opacity:0;
4217
- transform:translateY(-8px);
4166
+ .tds-time-field[data-invalid]{
4167
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4168
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4169
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4170
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4171
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4172
+ --tds-time-field-description-invalid-icon-display:inline-block;
4218
4173
  }
4219
- }
4220
4174
 
4221
- @keyframes tds-combo-box-popover-exit{
4222
- to{
4223
- opacity:0;
4224
- transform:translateY(-8px);
4175
+ .tds-time-field[data-disabled]{
4176
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4177
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4178
+ --tds-time-field-color:var(--t-form-color-disabled);
4179
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4225
4180
  }
4226
- }
4227
4181
 
4228
- @media (prefers-reduced-motion: reduce){
4229
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
4230
- animation:none;
4182
+ .tds-time-field[data-disabled] .tds-time-field-label{
4183
+ color:var(--t-form-color-disabled);
4231
4184
  }
4232
4185
 
4233
- .tds-combo-box-button{
4234
- transition:none;
4235
- }
4236
- }
4186
+ .tds-time-field[data-disabled] .tds-time-field-input{
4187
+ cursor:not-allowed;
4188
+ }
4237
4189
 
4238
- .tds-combo-box-list{
4239
- padding:0;
4240
- margin:0;
4190
+ .tds-time-field--lg{
4191
+ --tds-time-field-min-height:var(--t-container-size-lg);
4192
+ --tds-time-field-font-size:var(--t-font-size-lg);
4241
4193
  }
4242
4194
 
4243
- .tds-combo-box-list-item{
4244
- display:block;
4245
- padding-block:var(--t-spacing-1);
4246
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
4247
- overflow:hidden;
4248
- text-overflow:ellipsis;
4249
- font-size:1rem;
4195
+ .tds-time-field-label{
4196
+ font-size:var(--t-font-size-md);
4197
+ font-weight:var(--t-font-weight-normal);
4250
4198
  color:var(--t-text-color);
4251
- white-space:nowrap;
4252
4199
  cursor:default;
4253
- outline-offset:-1px;
4254
- border-radius:var(--t-border-radius);
4255
4200
  }
4256
4201
 
4257
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
4258
- background:var(--t-fill-color-neutral-070);
4259
- }
4202
+ .tds-time-field-input{
4203
+ display:flex;
4204
+ align-items:center;
4205
+ inline-size:100%;
4206
+ min-block-size:var(--tds-time-field-min-height);
4207
+ padding-block:var(--tds-time-field-padding-block);
4208
+ padding-inline:var(--t-spacing-1);
4209
+ font-family:inherit;
4210
+ font-size:var(--tds-time-field-font-size);
4211
+ font-variant-numeric:tabular-nums;
4212
+ line-height:1;
4213
+ color:var(--tds-time-field-color);
4214
+ cursor:text;
4215
+ outline:var(--t-focus-ring-width) solid transparent;
4216
+ outline-offset:0;
4217
+ background-color:var(--tds-time-field-background-color);
4218
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4219
+ border-radius:var(--t-form-border-radius);
4220
+ }
4260
4221
 
4261
- .tds-combo-box-list-item[data-selected]{
4262
- background:var(--t-fill-color-button-interaction-ghost-active);
4222
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4223
+ border-color:var(--tds-time-field-border-color-hover);
4263
4224
  }
4264
4225
 
4265
- .tds-combo-box-list-item[data-focus-visible]{
4266
- outline:var(--t-focus-ring-outline);
4267
- outline-offset:-1px;
4226
+ .tds-time-field-input[data-focus-within]{
4227
+ outline-color:var(--t-focus-ring-color);
4228
+ outline-offset:var(--t-focus-ring-offset);
4229
+ border-color:var(--tds-time-field-border-color-active);
4268
4230
  }
4269
4231
 
4270
- .tds-combo-box-list-item[data-disabled]{
4271
- color:var(--t-form-color-disabled);
4272
- cursor:not-allowed;
4232
+ .tds-time-field-input[data-readonly]{
4233
+ color:var(--t-form-color-readonly);
4234
+ background-color:var(--t-form-background-color-readonly);
4235
+ border-color:var(--t-form-border-color-readonly);
4273
4236
  }
4274
4237
 
4275
- .tds-combo-box-list-item[data-disabled][data-hovered]{
4276
- background:transparent;
4238
+ .tds-time-field-input[data-readonly][data-hovered]{
4239
+ border-color:var(--t-form-border-color-readonly);
4277
4240
  }
4278
4241
 
4279
- .tds-combo-box-list-section:not(:first-child){
4280
- margin-block-start:var(--t-spacing-half);
4242
+ .tds-time-field-input[data-readonly][data-focus-within]{
4243
+ outline-color:var(--t-focus-ring-color);
4244
+ outline-offset:var(--t-focus-ring-offset);
4245
+ border-color:var(--t-form-border-color-hover);
4246
+ }
4247
+
4248
+ .tds-time-field-segment{
4249
+ padding-inline:1px;
4250
+ font-variant-numeric:tabular-nums;
4251
+ cursor:text;
4252
+ caret-color:transparent;
4253
+ border-radius:var(--t-border-radius-sm);
4254
+ }
4255
+
4256
+ .tds-time-field-segment[data-placeholder]{
4257
+ color:var(--tds-time-field-placeholder-color);
4281
4258
  }
4282
4259
 
4283
- .tds-combo-box-section-header{
4284
- padding-block:var(--t-spacing-1);
4285
- padding-inline:var(--t-spacing-1);
4286
- font-size:var(--t-font-size-sm);
4287
- font-weight:var(--t-font-weight-semibold);
4288
- color:var(--t-text-color-secondary);
4260
+ .tds-time-field-segment[data-focused]{
4261
+ color:var(--t-text-color-inverted);
4262
+ outline:0;
4263
+ background:var(--t-fill-color-interaction);
4264
+ }
4265
+
4266
+ .tds-time-field-segment-separator{
4267
+ padding-inline:0;
4268
+ color:var(--tds-time-field-placeholder-color);
4289
4269
  }
4290
4270
 
4291
- .tds-combo-box-description{
4271
+ .tds-time-field-description{
4292
4272
  display:flex;
4293
4273
  gap:var(--t-spacing-half);
4294
4274
  align-items:flex-start;
4295
4275
  margin:0;
4296
4276
  font-size:var(--t-font-size-sm);
4297
4277
  line-height:1.35;
4298
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
4278
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4299
4279
  cursor:text;
4300
4280
  }
4301
4281
 
4302
- .tds-combo-box-description-invalid-icon{
4303
- display:var(--tds-combo-box-description-invalid-icon-display, none);
4304
- flex-shrink:0;
4305
- margin-block-start:calc(.5lh - .5em);
4306
- line-height:1.35;
4307
- }
4282
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4283
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4284
+ flex-shrink:0;
4285
+ margin-block-start:calc(.5lh - .5em);
4286
+ line-height:1.35;
4287
+ }
4308
4288
 
4309
4289
  .t-banner{
4310
4290
  --t-banner-font-size:var(--t-font-size-md);