@planningcenter/tapestry 3.4.1-rc.7 → 3.4.1-rc.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/components/button/BaseButton.d.ts +1 -1
  2. package/dist/components/button/BaseButton.d.ts.map +1 -1
  3. package/dist/components/button/BaseButton.js +4 -15
  4. package/dist/components/button/BaseButton.js.map +1 -1
  5. package/dist/components/button/DropdownButton.d.ts +1 -1
  6. package/dist/components/button/DropdownButton.js +1 -1
  7. package/dist/components/button/DropdownButton.js.map +1 -1
  8. package/dist/components/link/BaseLink.d.ts.map +1 -1
  9. package/dist/components/link/BaseLink.js +4 -9
  10. package/dist/components/link/BaseLink.js.map +1 -1
  11. package/dist/index.css +10 -2
  12. package/dist/index.css.map +1 -1
  13. package/dist/reactRender.css +2036 -2028
  14. package/dist/reactRender.css.map +1 -1
  15. package/dist/reactRenderLegacy.css +2036 -2028
  16. package/dist/reactRenderLegacy.css.map +1 -1
  17. package/dist/unstable.css +10 -2
  18. package/dist/unstable.css.map +1 -1
  19. package/dist/utilities/buttonLinkShared.d.ts +1 -1
  20. package/dist/utilities/buttonLinkShared.d.ts.map +1 -1
  21. package/dist/utilities/buttonLinkShared.js +4 -18
  22. package/dist/utilities/buttonLinkShared.js.map +1 -1
  23. package/package.json +4 -4
package/dist/reactRender.css CHANGED
@@ -1,425 +1,156 @@
1
- .tds-checkbox-group{
2
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3
- --tds-checkbox-group-line-height:1.4;
4
- --tds-checkbox-group-gap:var(--t-spacing-1);
5
1
 
6
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
7
- --tds-checkbox-group-description-line-height:1.35;
8
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
9
- --tds-checkbox-group-description-invalid-icon-display:none;
10
- display:flex;
11
- flex-direction:column;
12
- gap:0;
13
- padding:0;
14
- margin:0;
2
+ @media (prefers-reduced-motion: no-preference){
15
3
 
16
- font-size:var(--tds-checkbox-group-font-size);
17
- line-height:var(--tds-checkbox-group-line-height);
18
- border:0;
4
+ :root{
5
+ interpolate-size:allow-keywords;
19
6
  }
20
-
21
- .tds-checkbox-group legend{
22
- float:left;
23
- padding:0;
24
- margin:0;
25
7
  }
26
8
 
27
- .tds-checkbox-group[aria-invalid="true"]{
28
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
29
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
30
- }
9
+ @layer tds-component{
10
+ tds-sidenav,
11
+ .tds-sidenav{
12
+ --tds-sidenav-indent:12px;
13
+ --tds-sidenav-item-depth:0;
31
14
 
32
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
33
- margin-left:.25ch;
34
- color:var(--t-text-color-status-error);
35
- content:"*";
36
- }
15
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
37
16
 
38
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
39
- content:none;
40
- }
17
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
18
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
19
+ --tds-sidenav-collapse-closed-opacity:0;
20
+ --tds-sidenav-collapse-open-opacity:1;
21
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
22
+ --tds-sidenav-collapse-open-transform:translateY(0);
41
23
 
42
- .tds-checkbox-group-fields{
43
- display:flex;
44
- flex-direction:column;
45
- gap:var(--tds-checkbox-group-gap);
46
- align-items:flex-start;
47
- margin-top:var(--t-spacing-1);
48
- }
24
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
25
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
26
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
27
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
49
28
 
50
- .tds-checkbox-group-description{
51
- display:flex;
52
- gap:var(--t-spacing-half);
53
- align-items:flex-start;
54
- margin:var(--t-spacing-fourth) 0 0;
55
- font-size:var(--tds-checkbox-group-description-font-size);
56
- line-height:var(--tds-checkbox-group-description-line-height);
57
- color:var(--tds-checkbox-group-description-color);
58
- cursor:text;
59
- }
29
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
30
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
31
+ --tds-sidenav-item-nested-background-selected:transparent;
60
32
 
61
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
62
- display:var(--tds-checkbox-group-description-invalid-icon-display);
63
- flex-shrink:0;
64
- margin-top:calc(.5lh - .5em);
65
- line-height:var(--tds-checkbox-group-description-line-height);
66
- }
33
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
34
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
35
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
67
36
 
68
- .tds-checkbox-group--sm{
69
- --tds-checkbox-group-line-height:1.35;
70
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
71
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
72
- --tds-checkbox-group-description-line-height:1.3;
73
- }
37
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
39
+ }
74
40
 
75
- .tds-checkbox{
76
- --tds-checkbox-font-size:var(--t-font-size-md);
77
- --tds-checkbox-cursor:pointer;
78
- --tds-checkbox-line-height:1.4;
79
- --tds-checkbox-transition-property:background-color, border-color;
41
+ @media (prefers-reduced-motion: reduce){
42
+ tds-sidenav,
43
+ .tds-sidenav{
44
+ --tds-sidenav-collapse-transition-enter:none;
45
+ --tds-sidenav-collapse-transition-exit:none;
46
+ --tds-sidenav-collapse-closed-transform:none;
47
+ --tds-sidenav-collapse-open-transform:none;
48
+ }
49
+ }
80
50
 
81
- --tds-checkbox-input-size:var(--t-element-size-md);
82
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
83
- --tds-checkbox-input-border-color:var(--t-form-border-color);
84
- --tds-checkbox-input-background-color:var(--t-form-background-color);
51
+ .tds-sidenav--theme-gray{
52
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
53
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
54
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
55
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
56
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
57
+ }
58
+ }
85
59
 
86
- --tds-checkbox-input-icon:none;
87
- --tds-checkbox-input-icon-visibility:hidden;
88
- --tds-checkbox-input-icon-opacity:0;
89
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
60
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
+ display:flex;
62
+ }
90
63
 
91
- --tds-checkbox-label-color:var(--t-form-color);
64
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
65
+ flex-direction:column;
66
+ gap:var(--t-spacing-half);
67
+ width:100%;
68
+ }
92
69
 
93
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
94
- --tds-checkbox-description-line-height:1.35;
95
- --tds-checkbox-description-color:var(--t-text-color-secondary);
96
- --tds-checkbox-description-invalid-icon-display:none;
70
+ .tds-sidenav-section-list{
71
+ width:100%;
72
+ padding:0;
73
+ margin:0;
74
+ list-style:none;
75
+ }
97
76
 
98
- position:relative;
99
- display:inline-grid;
100
- grid-template-columns:auto;
101
- grid-auto-columns:1fr;
102
- gap:var(--t-spacing-fourth) 0;
103
- line-height:var(--tds-checkbox-line-height);
104
- -webkit-user-select:none;
105
- -moz-user-select:none;
106
- user-select:none;
77
+ .tds-sidenav-section-header{
78
+ display:flex;
79
+ align-items:baseline;
80
+ justify-content:space-between;
81
+ padding-top:var(--t-spacing-2);
107
82
  }
108
83
 
109
- .tds-checkbox label{
110
- grid-area:1 / 2;
111
- padding-inline-start:var(--t-spacing-1);
112
- font-size:var(--tds-checkbox-font-size);
113
- font-weight:var(--t-font-weight-normal);
114
- color:var(--tds-checkbox-label-color);
115
- cursor:var(--tds-checkbox-cursor);
84
+ .tds-sidenav-section-header h2{
85
+ margin:0;
86
+ font-size:var(--t-font-size-sm);
87
+ font-weight:var(--t-font-weight-semibold);
88
+ line-height:1.35;
89
+ color:var(--t-text-color-secondary);
90
+ text-transform:uppercase;
116
91
  }
117
92
 
118
- .tds-checkbox tds-indeterminate{
93
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
+ padding-top:0;
95
+ }
96
+
97
+ .tds-sidenav-section-header [slot="label-actions"]{
119
98
  display:flex;
99
+ gap:var(--t-spacing-half);
100
+ align-items:center;
120
101
  }
121
102
 
122
- .tds-checkbox input[type="checkbox"]{
103
+ .tds-sidenav-section [slot="section-actions"]{
104
+ display:flex;
105
+ gap:12px;
106
+ align-items:center;
107
+ min-height:42px;
108
+ padding:var(--t-spacing-1) 0;
109
+ }
110
+
111
+ .tds-sidenav-section-list,
112
+ .tds-sidenav-item{
113
+ width:100%;
114
+ padding:0;
115
+ margin:0;
116
+ }
117
+
118
+ .tds-sidenav-item :is(a,button){
123
119
  position:relative;
124
- width:1em;
125
- height:1em;
126
- margin:calc((1lh - 1em) / 2) 0 0;
127
- font-size:var(--tds-checkbox-font-size);
128
- line-height:inherit;
120
+ display:flex;
121
+ gap:12px;
122
+ align-items:center;
123
+ width:100%;
124
+ padding:12px;
125
+ overflow:hidden;
126
+ font-size:var(--t-font-size-sm);
127
+ line-height:18px;
128
+ color:var(--t-text-color-headline);
129
+ white-space:nowrap;
130
+ text-decoration:none;
129
131
  -webkit-appearance:none;
130
132
  -moz-appearance:none;
131
133
  appearance:none;
132
- cursor:var(--tds-checkbox-cursor);
133
- background-color:var(--tds-checkbox-input-background-color);
134
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
135
- border-radius:var(--tds-checkbox-input-border-radius);
136
- transition-timing-function:var(--t-ease-in-out);
137
- transition-duration:var(--t-duration-200);
138
- transition-property:var(--tds-checkbox-transition-property);
134
+ cursor:pointer;
135
+ background-color:var(--tds-sidenav-item-background, transparent);
136
+ border:0;
137
+ border-radius:var(--t-border-radius);
138
+ transition:var(--tds-sidenav-item-transition);
139
139
  }
140
140
 
141
- :is(.tds-checkbox input[type="checkbox"])::before{
142
- position:absolute;
143
- top:50%;
144
- left:50%;
145
- visibility:var(--tds-checkbox-input-icon-visibility);
146
- width:100%;
147
- height:100%;
148
- content:"";
149
- background-color:var(--tds-checkbox-input-icon-fill);
150
- border-radius:var(--tds-checkbox-input-border-radius);
151
- opacity:var(--tds-checkbox-input-icon-opacity);
152
- -webkit-mask-image:var(--tds-checkbox-input-icon);
153
- mask-image:var(--tds-checkbox-input-icon);
154
- -webkit-mask-repeat:no-repeat;
155
- mask-repeat:no-repeat;
156
- -webkit-mask-size:contain;
157
- mask-size:contain;
158
- transform:translate(-50%, -50%);
141
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
142
+ display:block;
143
+ flex:1;
144
+ overflow:hidden;
145
+ text-overflow:ellipsis;
146
+ text-align:left;
147
+ white-space:nowrap;
159
148
  }
160
149
 
161
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
162
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
163
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
164
- }
165
-
166
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
167
- outline:var(--t-focus-ring-outline);
168
- outline-offset:var(--t-focus-ring-offset);
169
- }
170
-
171
- :is(.tds-checkbox input[type="checkbox"]):disabled{
172
- pointer-events:none;
173
- }
174
-
175
- @media (prefers-reduced-motion: reduce){
176
-
177
- .tds-checkbox input[type="checkbox"]{
178
- --tds-checkbox-transition-property:none;
179
- }
180
- }
181
-
182
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
183
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
184
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
185
- --tds-checkbox-input-icon-visibility:visible;
186
- --tds-checkbox-input-icon-opacity:1;
187
- }
188
-
189
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
190
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
191
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
192
- }
193
-
194
- .tds-checkbox:has(input:checked){
195
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
196
- }
197
-
198
- .tds-checkbox:has(input:indeterminate){
199
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
200
- }
201
-
202
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
203
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
204
- --tds-checkbox-description-color:var(--t-text-color-status-error);
205
- --tds-checkbox-description-invalid-icon-display:inline-block;
206
- }
207
-
208
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
209
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
210
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
211
- }
212
-
213
- :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{
214
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
215
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
216
- }
217
-
218
- :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){
219
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
220
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
221
- }
222
-
223
- .tds-checkbox:has(input:required) label::after{
224
- margin-left:.25ch;
225
- color:var(--t-text-color-status-error);
226
- content:"*";
227
- }
228
-
229
- .tds-checkbox:has(input:disabled){
230
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
231
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
232
-
233
- --tds-checkbox-label-color:var(--t-form-color-disabled);
234
- --tds-checkbox-description-color:var(--t-form-color-disabled);
235
- --tds-checkbox-cursor:not-allowed;
236
- }
237
-
238
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
239
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
240
- }
241
-
242
- .tds-checkbox-description{
243
- display:flex;
244
- grid-area:2 / 2;
245
- gap:var(--t-spacing-half);
246
- align-items:flex-start;
247
- padding-inline-start:var(--t-spacing-1);
248
- margin:0;
249
- font-size:var(--tds-checkbox-description-font-size);
250
- line-height:var(--tds-checkbox-description-line-height);
251
- color:var(--tds-checkbox-description-color);
252
- cursor:text;
253
- }
254
-
255
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
256
- display:var(--tds-checkbox-description-invalid-icon-display);
257
- flex-shrink:0;
258
- margin-top:calc(.5lh - .5em);
259
- line-height:var(--tds-checkbox-description-line-height);
260
- }
261
-
262
- .tds-checkbox--sm{
263
- --tds-checkbox-line-height:1.35;
264
- --tds-checkbox-input-size:var(--t-element-size-sm);
265
- --tds-checkbox-font-size:var(--t-font-size-sm);
266
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
267
- --tds-checkbox-description-line-height:1.3;
268
- }
269
-
270
-
271
- @media (prefers-reduced-motion: no-preference){
272
-
273
- :root{
274
- interpolate-size:allow-keywords;
275
- }
276
- }
277
-
278
- @layer tds-component{
279
- tds-sidenav,
280
- .tds-sidenav{
281
- --tds-sidenav-indent:12px;
282
- --tds-sidenav-item-depth:0;
283
-
284
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
285
-
286
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
287
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
288
- --tds-sidenav-collapse-closed-opacity:0;
289
- --tds-sidenav-collapse-open-opacity:1;
290
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
291
- --tds-sidenav-collapse-open-transform:translateY(0);
292
-
293
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
294
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
295
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
296
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
297
-
298
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
299
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
300
- --tds-sidenav-item-nested-background-selected:transparent;
301
-
302
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
303
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
304
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
305
-
306
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
307
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
308
- }
309
-
310
- @media (prefers-reduced-motion: reduce){
311
- tds-sidenav,
312
- .tds-sidenav{
313
- --tds-sidenav-collapse-transition-enter:none;
314
- --tds-sidenav-collapse-transition-exit:none;
315
- --tds-sidenav-collapse-closed-transform:none;
316
- --tds-sidenav-collapse-open-transform:none;
317
- }
318
- }
319
-
320
- .tds-sidenav--theme-gray{
321
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
322
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
323
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
324
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
325
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
326
- }
327
- }
328
-
329
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
330
- display:flex;
331
- }
332
-
333
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
334
- flex-direction:column;
335
- gap:var(--t-spacing-half);
336
- width:100%;
337
- }
338
-
339
- .tds-sidenav-section-list{
340
- width:100%;
341
- padding:0;
342
- margin:0;
343
- list-style:none;
344
- }
345
-
346
- .tds-sidenav-section-header{
347
- display:flex;
348
- align-items:baseline;
349
- justify-content:space-between;
350
- padding-top:var(--t-spacing-2);
351
- }
352
-
353
- .tds-sidenav-section-header h2{
354
- margin:0;
355
- font-size:var(--t-font-size-sm);
356
- font-weight:var(--t-font-weight-semibold);
357
- line-height:1.35;
358
- color:var(--t-text-color-secondary);
359
- text-transform:uppercase;
360
- }
361
-
362
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
363
- padding-top:0;
364
- }
365
-
366
- .tds-sidenav-section-header [slot="label-actions"]{
367
- display:flex;
368
- gap:var(--t-spacing-half);
369
- align-items:center;
370
- }
371
-
372
- .tds-sidenav-section [slot="section-actions"]{
373
- display:flex;
374
- gap:12px;
375
- align-items:center;
376
- min-height:42px;
377
- padding:var(--t-spacing-1) 0;
378
- }
379
-
380
- .tds-sidenav-section-list,
381
- .tds-sidenav-item{
382
- width:100%;
383
- padding:0;
384
- margin:0;
385
- }
386
-
387
- .tds-sidenav-item :is(a,button){
388
- position:relative;
389
- display:flex;
390
- gap:12px;
391
- align-items:center;
392
- width:100%;
393
- padding:12px;
394
- overflow:hidden;
395
- font-size:var(--t-font-size-sm);
396
- line-height:18px;
397
- color:var(--t-text-color-headline);
398
- white-space:nowrap;
399
- text-decoration:none;
400
- -webkit-appearance:none;
401
- -moz-appearance:none;
402
- appearance:none;
403
- cursor:pointer;
404
- background-color:var(--tds-sidenav-item-background, transparent);
405
- border:0;
406
- border-radius:var(--t-border-radius);
407
- transition:var(--tds-sidenav-item-transition);
408
- }
409
-
410
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
411
- display:block;
412
- flex:1;
413
- overflow:hidden;
414
- text-overflow:ellipsis;
415
- text-align:left;
416
- white-space:nowrap;
417
- }
418
-
419
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
420
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
421
- color:var(--t-text-color-headline);
422
- text-decoration:none;
150
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
151
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
152
+ color:var(--t-text-color-headline);
153
+ text-decoration:none;
423
154
  }
424
155
 
425
156
  :is(.tds-sidenav-item :is(a,button)):active{
@@ -629,2087 +360,2356 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
629
360
  flex-direction:column;
630
361
  }
631
362
 
632
- .tds-combo-box{
633
- --tds-combo-box-button-offset:4px;
634
- }
635
-
636
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
637
- transform:rotate(.5turn);
363
+ @layer t-critical{
364
+ tds-page-header:not(.hydrated){
365
+ display:none;
638
366
  }
639
-
640
- .tds-combo-box--lg{
641
- --tds-combo-box-button-offset:5px;
642
- }
643
-
644
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
645
- display:none;
646
- }
647
-
648
- .tds-combo-box-input{
649
- display:flex;
650
- flex:1;
651
- align-items:center;
652
- padding-block:var(--tds-field-padding-block);
653
- padding-inline:var(--tds-field-padding-inline);
654
- font-family:inherit;
655
- font-size:inherit;
656
- color:inherit;
657
- outline:0;
658
- background:transparent;
659
- border:0;
660
367
  }
661
368
 
662
- .tds-combo-box-input:has( + .tds-combo-box-button){
663
- padding-inline-end:0;
664
- }
665
-
666
- .tds-combo-box-input::-moz-placeholder{
667
- color:var(--tds-field-placeholder-color);
668
- -moz-user-select:none;
669
- user-select:none;
670
- }
671
-
672
- .tds-combo-box-input::placeholder{
673
- color:var(--tds-field-placeholder-color);
674
- -webkit-user-select:none;
675
- -moz-user-select:none;
676
- user-select:none;
677
- }
369
+ @layer t-component{
370
+ .tds-page-header{
371
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
372
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
373
+ --tds-page-header-color:var(--t-text-color);
374
+ --tds-page-header-bottom-border-color:transparent;
375
+ --tds-page-header-headline-color:var(--t-text-color-headline);
376
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
377
+ --tds-page-header-padding-x:var(--t-spacing-2);
378
+ --tds-page-header-padding-y:var(--t-spacing-2);
379
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
380
+ --tds-page-header-nav-gap:var(--t-spacing-1);
381
+ --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%);
382
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
383
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
384
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
385
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
386
+ --tds-page-header-nav-item-border-width:1px;
678
387
 
679
- .tds-combo-box-button{
680
- flex-shrink:0;
681
- align-self:center;
682
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
683
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
684
- padding:0;
685
- margin-inline-end:var(--tds-combo-box-button-offset);
686
- }
388
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
389
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
687
390
 
688
- .tds-combo-box-button > svg{
689
- inline-size:var(--tds-field-font-size);
690
- block-size:var(--tds-field-font-size);
691
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
692
- }
391
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
392
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
393
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
693
394
 
694
- .tds-combo-box-popover{
695
- width:var(--trigger-width);
696
- max-block-size:inherit;
697
- padding:var(--t-spacing-1);
698
- overflow:auto;
699
- scroll-behavior:smooth;
700
- overscroll-behavior:none;
701
- -webkit-user-select:none;
702
- -moz-user-select:none;
703
- user-select:none;
704
- outline:0;
705
- scrollbar-color:#0004 var(--t-surface-color-card);
706
- scrollbar-width:thin;
707
- background:var(--t-surface-color-card);
708
- background-clip:padding-box;
709
- border:1px solid var(--t-border-color);
710
- border-radius:var(--t-border-radius);
711
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
712
- }
395
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
396
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
713
397
 
714
- .tds-combo-box-popover[data-entering]{
715
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
716
- }
398
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
399
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
400
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
717
401
 
718
- .tds-combo-box-popover[data-exiting]{
719
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
402
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
403
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
404
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
405
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
406
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
720
407
  }
721
408
 
722
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
723
- will-change:opacity, transform;
409
+ .tds-page-header--profile{
410
+ --tds-page-header-padding-y:20px;
724
411
  }
725
412
 
726
- @keyframes tds-combo-box-popover{
727
- from{
728
- opacity:0;
729
- transform:translateY(-8px);
413
+ @supports (color: light-dark(#fff, #000)){
414
+ .tds-page-header{
415
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
416
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
417
+ }
730
418
  }
731
- }
732
419
 
733
- @media (prefers-reduced-motion: reduce){
734
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
735
- animation:none;
420
+ @media (min-width: 600px){
421
+ .tds-page-header{
422
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
423
+ --tds-page-header-color:var(--t-text-color-secondary);
424
+ --tds-page-header-bottom-border-color:var(--t-border-color);
425
+ --tds-page-header-padding-x:var(--t-spacing-3);
426
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
427
+ --tds-page-header-nav-gap:var(--t-spacing-half);
428
+ --tds-page-header-nav-background:transparent;
429
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
430
+ --tds-page-header-nav-item-border-width:1px;
431
+ --tds-page-header-nav-item-color:var(--t-text-color);
432
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
433
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
434
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
435
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
436
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
437
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
736
438
  }
737
-
738
- .tds-combo-box-button > svg{
739
- transition:none;
740
439
  }
741
440
  }
742
441
 
743
- .tds-combo-box-list{
744
- padding:0;
745
- margin:0;
746
- }
747
-
748
- .tds-combo-box-list-item{
749
- display:block;
750
- padding-block:var(--t-spacing-1);
751
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
752
- overflow:hidden;
753
- text-overflow:ellipsis;
754
- font-size:1rem;
755
- color:var(--t-text-color);
756
- white-space:nowrap;
757
- cursor:default;
758
- border-radius:var(--t-border-radius);
442
+ .tds-page-header{
443
+ display:flex;
444
+ flex-direction:column;
445
+ padding-top:var(--tds-page-header-padding-y);
446
+ color:var(--tds-page-header-color);
447
+ background:var(--tds-page-header-background-color);
448
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
759
449
  }
760
450
 
761
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
762
- background:var(--t-fill-color-neutral-070);
451
+ .tds-page-header:not(.has-nav){
452
+ padding-bottom:var(--tds-page-header-padding-y);
763
453
  }
764
454
 
765
- .tds-combo-box-list-item[data-selected]{
766
- background:var(--t-fill-color-button-interaction-ghost-active);
455
+ .tds-page-header.inactive{
456
+ background:var(--tds-page-header-background-color-inactive);
767
457
  }
768
458
 
769
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
770
- background:var(--t-fill-color-neutral-060);
459
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
460
+ width:100%;
771
461
  }
772
462
 
773
- .tds-combo-box-list-item[data-disabled]{
774
- color:var(--t-form-color-disabled);
775
- cursor:not-allowed;
463
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
464
+ display:flex;
465
+ flex-flow:row wrap;
466
+ gap:var(--t-spacing-half) var(--t-spacing-1);
467
+ align-items:flex-start;
468
+ justify-content:flex-start;
469
+ min-width:0;
776
470
  }
777
471
 
778
- .tds-combo-box-list-item[data-disabled][data-hovered]{
779
- background:transparent;
472
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
473
+ display:flex;
474
+ gap:var(--tds-page-header-nav-gap);
475
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
476
+ margin:0 0 -1px;
477
+ overflow:auto;
478
+ list-style:none;
479
+ background:var(--tds-page-header-nav-background);
780
480
  }
781
481
 
782
- .tds-combo-box-empty-state{
783
- position:relative;
784
- min-block-size:var(--t-spacing-3);
785
- padding-block:var(--t-spacing-1);
786
- padding-inline:var(--t-spacing-2);
787
- font-size:var(--t-font-size-md);
788
- color:var(--t-text-color-secondary);
789
- }
790
-
791
- .tds-combo-box-load-more{
792
- position:relative;
793
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
794
- }
795
-
796
- .tds-combo-box-empty-state,
797
- .tds-combo-box-load-more{
798
- --tds-loading-spinner-visibility:visible;
799
- --tds-loading-spinner-animation-play-state:running;
800
- }
482
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
483
+ position:relative;
484
+ display:inline-flex;
485
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
486
+ font-size:var(--t-font-size-sm);
487
+ line-height:22px;
488
+ color:var(--tds-page-header-nav-item-color);
489
+ white-space:nowrap;
490
+ text-decoration:none;
491
+ -webkit-appearance:none;
492
+ -moz-appearance:none;
493
+ appearance:none;
494
+ cursor:pointer;
495
+ outline-offset:-2px;
496
+ background-color:var(--tds-page-header-nav-item-background-color);
497
+ background-clip:padding-box;
498
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
499
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
500
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
501
+ }
801
502
 
802
- .tds-combo-box-list-section:not(:first-child){
803
- margin-block-start:var(--t-spacing-half);
804
- }
503
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
504
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
505
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
506
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
507
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
508
+ }
805
509
 
806
- .tds-combo-box-section-header{
807
- padding-block:var(--t-spacing-1);
808
- padding-inline:var(--t-spacing-1);
809
- font-size:var(--t-font-size-sm);
810
- font-weight:var(--t-font-weight-semibold);
811
- color:var(--t-text-color-secondary);
812
- }
813
-
814
- .tds-date-picker{
815
- --tds-date-picker-button-offset:4px;
816
- }
510
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
511
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
512
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
513
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
514
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
515
+ }
817
516
 
818
- .tds-date-picker--lg{
819
- --tds-date-picker-button-offset:5px;
820
- }
517
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
518
+ background-color:var(--tds-page-header-nav-item-background-color-active);
519
+ border-color:var(--tds-page-header-nav-item-border-color-active);
520
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
521
+ }
821
522
 
822
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
823
- outline-color:transparent;
824
- outline-offset:0;
825
- border-color:var(--tds-field-border-color);
826
- }
523
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
524
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
525
+ color:var(--tds-page-header-nav-item-color-disabled);
526
+ cursor:not-allowed;
527
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
528
+ opacity:1;
529
+ }
827
530
 
828
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
829
- display:none;
830
- }
531
+ @media (min-width: 600px){
532
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
533
+ position:absolute;
534
+ inset:auto -1px -1px;
535
+ height:1px;
536
+ pointer-events:none;
537
+ content:"";
538
+ background-color:var(--tds-page-header-bottom-border-color);
539
+ }
540
+ }
831
541
 
832
- .tds-date-picker-input{
833
- flex:1;
834
- padding-block:var(--tds-field-padding-block);
835
- padding-inline:var(--tds-field-padding-inline);
836
- overflow:auto clip;
837
- font-variant-numeric:tabular-nums;
838
- text-wrap:nowrap;
839
- scrollbar-width:none;
840
- }
542
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
543
+ position:relative;
544
+ }
841
545
 
842
- .tds-date-picker-input:has( + .tds-date-picker-button){
843
- padding-inline-end:0;
844
- }
546
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
547
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
548
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
549
+ }
845
550
 
846
- .tds-date-picker-button{
847
- flex-shrink:0;
848
- align-self:center;
849
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
850
- block-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
851
- padding:0;
852
- margin-inline-end:var(--tds-date-picker-button-offset);
853
- }
551
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
552
+ position:absolute;
553
+ top:-5px;
554
+ right:-2px;
555
+ width:10px;
556
+ height:10px;
557
+ content:"";
558
+ background:var(--tds-page-header-nav-item-indicator-color);
559
+ border-radius:50%;
560
+ }
854
561
 
855
- .tds-date-picker-popover{
856
- --tds-date-picker-popover-font-size:var(--t-font-size-md);
857
- --tds-date-picker-popover-padding:var(--t-spacing-1-half);
858
- --tds-date-picker-popover-background-color:var(--t-surface-color-card);
859
- --tds-date-picker-popover-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
860
- --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
861
- --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
862
- --tds-date-picker-popover-interactive-property:color, background-color, border-color;
562
+ @media (prefers-reduced-motion: no-preference){
563
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
564
+ animation:indicator-pulse 1.25s ease infinite;
565
+ }
566
+ }
863
567
 
864
- position:relative;
865
- overflow:hidden;
866
- background-color:var(--tds-date-picker-popover-background-color);
867
- border:var(--t-border-width) solid var(--t-border-color);
868
- border-radius:var(--t-border-radius);
869
- box-shadow:var(--tds-date-picker-popover-shadow);
568
+ .tds-page-header__title-bar{
569
+ display:flex;
570
+ flex-direction:column;
571
+ gap:var(--t-spacing-2) var(--t-spacing-1);
572
+ align-items:flex-start;
573
+ justify-content:space-between;
574
+ padding:0 var(--tds-page-header-padding-x);
870
575
  }
871
576
 
872
- .tds-date-picker-popover[data-entering]{
873
- animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
577
+ .tds-page-header--profile > .tds-page-header__title-bar{
578
+ align-items:center;
874
579
  }
875
580
 
876
- .tds-date-picker-popover[data-exiting]{
877
- animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
878
- }
581
+ .tds-page-header__primary{
582
+ width:100%;
583
+ }
879
584
 
880
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
881
- will-change:opacity, transform;
585
+ .tds-page-header__primary h1{
586
+ margin:0;
587
+ font-size:var(--tds-page-header-headline-font-size);
588
+ font-weight:var(--t-font-weight-normal);
589
+ line-height:32px;
590
+ color:var(--tds-page-header-headline-color);
591
+ overflow-wrap:break-word;
882
592
  }
883
593
 
884
- @keyframes tds-date-picker-popover{
885
- from{
886
- opacity:0;
887
- transform:translateY(-8px);
594
+ @media (min-width: 960px){
595
+ .tds-page-header__primary{
596
+ flex:1 1 max-content;
597
+ width:auto;
598
+ min-width:0;
599
+ max-width:100%;
888
600
  }
889
- }
890
601
 
891
- @media (prefers-reduced-motion: reduce){
892
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
893
- animation:none;
602
+ .tds-page-header__title-bar,
603
+ .tds-page-header--profile .tds-page-header__title-bar{
604
+ flex-flow:row nowrap;
605
+ row-gap:12px;
606
+ align-items:flex-start;
607
+ }
608
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
609
+ width:auto;
894
610
  }
895
- }
896
-
897
- .tds-date-picker-overlay{
898
- position:absolute;
899
- inset:0;
900
- z-index:1;
901
- display:flex;
902
- background-color:var(--tds-date-picker-popover-background-color);
903
- }
904
-
905
- .tds-date-picker-overlay-list{
906
- display:grid;
907
- flex:1;
908
- grid-template-columns:repeat(3, 1fr);
909
- gap:var(--t-spacing-half);
910
- padding-inline:var(--tds-date-picker-popover-padding);
911
- outline:0;
912
- scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
913
- scrollbar-width:thin;
914
- }
915
611
 
916
- .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
917
- grid-template-rows:repeat(4, 1fr);
918
- padding-bottom:var(--tds-date-picker-popover-padding);
612
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
613
+ justify-content:flex-end;
614
+ }
919
615
  }
920
616
 
921
- .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
922
- grid-auto-rows:var(--t-container-size-xl);
923
- padding-right:var(--t-spacing-1);
924
- overflow-y:auto;
925
- scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
617
+ .tds-page-header-phone,
618
+ .tds-page-header-email{
619
+ color:var(--tds-page-header-color);
620
+ white-space:nowrap;
926
621
  }
927
622
 
928
- .tds-date-picker-overlay-cell{
929
- display:flex;
930
- align-items:center;
931
- justify-content:center;
932
- font-family:inherit;
933
- font-size:var(--tds-date-picker-popover-font-size);
934
- color:var(--t-text-color);
935
- cursor:pointer;
936
- outline:0;
937
- background-color:transparent;
938
- border:0;
939
- border-radius:var(--t-border-radius-md);
940
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
941
- transition-duration:var(--t-duration-100);
942
- transition-property:var(--tds-date-picker-popover-interactive-property);
623
+ .tds-page-header-email{
624
+ max-width:100%;
625
+ overflow:hidden;
626
+ text-overflow:ellipsis;
943
627
  }
944
628
 
945
- .tds-date-picker-overlay-cell[data-hovered]{
946
- background-color:var(--t-fill-color-button-neutral-outline-hover);
629
+ @keyframes indicator-pulse{
630
+ 0%{
631
+ opacity:.3;
632
+ transform:scale(.9);
947
633
  }
948
634
 
949
- .tds-date-picker-overlay-cell[data-pressed]{
950
- background-color:var(--t-fill-color-button-neutral-outline-active);
635
+ 100%{
636
+ opacity:0;
637
+ transform:scale(1.75);
951
638
  }
639
+ }
952
640
 
953
- .tds-date-picker-overlay-cell[data-selected]{
954
- font-weight:var(--t-font-weight-semibold);
955
- color:var(--t-text-color-inverted);
956
- background-color:var(--t-fill-color-interaction);
957
- }
641
+ .tds-checkbox{
642
+ --tds-checkbox-font-size:var(--t-font-size-md);
643
+ --tds-checkbox-cursor:pointer;
644
+ --tds-checkbox-line-height:1.4;
645
+ --tds-checkbox-transition-property:background-color, border-color;
958
646
 
959
- .tds-date-picker-overlay-cell[data-focus-visible]{
960
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
961
- }
647
+ --tds-checkbox-input-size:var(--t-element-size-md);
648
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
649
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
650
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
962
651
 
963
- .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
964
- outline-offset:var(--t-focus-ring-offset);
965
- }
652
+ --tds-checkbox-input-icon:none;
653
+ --tds-checkbox-input-icon-visibility:hidden;
654
+ --tds-checkbox-input-icon-opacity:0;
655
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
966
656
 
967
- .tds-date-picker-calendar-heading{
968
- display:flex;
969
- flex:1;
970
- gap:var(--t-spacing-1);
971
- align-items:center;
972
- justify-content:flex-start;
973
- padding-inline-start:4px;
974
- }
657
+ --tds-checkbox-label-color:var(--t-form-color);
975
658
 
976
- .tds-date-picker-calendar-overlay-trigger{
977
- --_background-color:transparent;
978
- position:relative;
979
- padding:0;
980
- font-family:inherit;
981
- font-size:var(--tds-date-picker-popover-font-size);
982
- font-weight:var(--t-font-weight-semibold);
983
- font-feature-settings:"ss01", "ss02";
984
- color:var(--t-text-color);
985
- cursor:pointer;
986
- outline:0;
987
- background-color:transparent;
988
- border:0;
989
- border-radius:var(--t-border-radius-md);
990
- isolation:isolate;
991
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
992
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
993
- transition-property:var(--tds-date-picker-popover-interactive-property);
994
- }
659
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
660
+ --tds-checkbox-description-line-height:1.35;
661
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
662
+ --tds-checkbox-description-invalid-icon-display:none;
995
663
 
996
- .tds-date-picker-calendar-overlay-trigger::before{
997
- position:absolute;
998
- inset:calc(var(--t-spacing-half) * -1);
999
- z-index:-1;
1000
- pointer-events:inherit;
1001
- content:"";
1002
- background-color:var(--_background-color);
1003
- border-radius:inherit;
1004
- }
664
+ position:relative;
665
+ display:inline-grid;
666
+ grid-template-columns:auto;
667
+ grid-auto-columns:1fr;
668
+ gap:var(--t-spacing-fourth) 0;
669
+ line-height:var(--tds-checkbox-line-height);
670
+ -webkit-user-select:none;
671
+ -moz-user-select:none;
672
+ user-select:none;
673
+ }
1005
674
 
1006
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
1007
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
675
+ .tds-checkbox label{
676
+ grid-area:1 / 2;
677
+ padding-inline-start:var(--t-spacing-1);
678
+ font-size:var(--tds-checkbox-font-size);
679
+ font-weight:var(--t-font-weight-normal);
680
+ color:var(--tds-checkbox-label-color);
681
+ cursor:var(--tds-checkbox-cursor);
1008
682
  }
1009
683
 
1010
- .tds-date-picker-calendar-overlay-trigger[data-pressed]{
1011
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
684
+ .tds-checkbox tds-indeterminate{
685
+ display:flex;
1012
686
  }
1013
687
 
1014
- .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
1015
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1016
- outline-offset:var(--t-focus-ring-offset);
688
+ .tds-checkbox input[type="checkbox"]{
689
+ position:relative;
690
+ width:1em;
691
+ height:1em;
692
+ margin:calc((1lh - 1em) / 2) 0 0;
693
+ font-size:var(--tds-checkbox-font-size);
694
+ line-height:inherit;
695
+ -webkit-appearance:none;
696
+ -moz-appearance:none;
697
+ appearance:none;
698
+ cursor:var(--tds-checkbox-cursor);
699
+ background-color:var(--tds-checkbox-input-background-color);
700
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
701
+ border-radius:var(--tds-checkbox-input-border-radius);
702
+ transition-timing-function:var(--t-ease-in-out);
703
+ transition-duration:var(--t-duration-200);
704
+ transition-property:var(--tds-checkbox-transition-property);
1017
705
  }
1018
706
 
1019
- .tds-date-picker-calendar{
1020
- inline-size:-moz-fit-content;
1021
- inline-size:fit-content;
1022
- font-size:var(--tds-date-picker-popover-font-size);
1023
- }
707
+ :is(.tds-checkbox input[type="checkbox"])::before{
708
+ position:absolute;
709
+ top:50%;
710
+ left:50%;
711
+ visibility:var(--tds-checkbox-input-icon-visibility);
712
+ width:100%;
713
+ height:100%;
714
+ content:"";
715
+ background-color:var(--tds-checkbox-input-icon-fill);
716
+ border-radius:var(--tds-checkbox-input-border-radius);
717
+ opacity:var(--tds-checkbox-input-icon-opacity);
718
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
719
+ mask-image:var(--tds-checkbox-input-icon);
720
+ -webkit-mask-repeat:no-repeat;
721
+ mask-repeat:no-repeat;
722
+ -webkit-mask-size:contain;
723
+ mask-size:contain;
724
+ transform:translate(-50%, -50%);
725
+ }
1024
726
 
1025
- .tds-date-picker-calendar-body{
1026
- position:relative;
1027
- padding:var(--tds-date-picker-popover-padding);
1028
- padding-block-start:0;
1029
- }
727
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
728
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
729
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
730
+ }
1030
731
 
1031
- .tds-date-picker-calendar-header{
1032
- display:flex;
1033
- align-items:center;
1034
- justify-content:space-between;
1035
- padding:var(--tds-date-picker-popover-padding);
1036
- }
732
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
733
+ outline:var(--t-focus-ring-outline);
734
+ outline-offset:var(--t-focus-ring-offset);
735
+ }
1037
736
 
1038
- .tds-date-picker-calendar-title{
1039
- padding:var(--t-spacing-half) var(--t-spacing-1);
1040
- font-size:var(--tds-date-picker-popover-font-size);
1041
- font-weight:var(--t-font-weight-semibold);
1042
- }
737
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
738
+ pointer-events:none;
739
+ }
1043
740
 
1044
- .tds-date-picker-calendar-nav{
1045
- display:flex;
1046
- align-items:center;
1047
- justify-content:center;
1048
- padding:var(--t-spacing-half);
1049
- font-size:.875em;
1050
- color:var(--t-text-color);
1051
- cursor:pointer;
1052
- outline:0;
1053
- background-color:transparent;
1054
- border:0;
1055
- border-radius:var(--t-border-radius-md);
1056
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1057
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
1058
- transition-property:var(--tds-date-picker-popover-interactive-property);
1059
- }
741
+ @media (prefers-reduced-motion: reduce){
1060
742
 
1061
- .tds-date-picker-calendar-nav[data-hovered]{
1062
- background-color:var(--t-fill-color-button-neutral-outline-hover);
743
+ .tds-checkbox input[type="checkbox"]{
744
+ --tds-checkbox-transition-property:none;
1063
745
  }
746
+ }
1064
747
 
1065
- .tds-date-picker-calendar-nav[data-pressed]{
1066
- background-color:var(--t-fill-color-button-neutral-outline-active);
748
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
749
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
750
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
751
+ --tds-checkbox-input-icon-visibility:visible;
752
+ --tds-checkbox-input-icon-opacity:1;
1067
753
  }
1068
754
 
1069
- .tds-date-picker-calendar-nav[data-focus-visible]{
1070
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1071
- outline-offset:var(--t-focus-ring-offset);
1072
- }
755
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
756
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
757
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
758
+ }
1073
759
 
1074
- .tds-date-picker-calendar-nav[data-disabled]{
1075
- color:var(--t-text-color-disabled);
1076
- cursor:not-allowed;
760
+ .tds-checkbox:has(input:checked){
761
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1077
762
  }
1078
763
 
1079
- .tds-date-picker-calendar-grid{
1080
- font-feature-settings:"ss01", "ss02";
1081
- border-collapse:collapse;
1082
- }
1083
-
1084
- .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
1085
- padding:0;
1086
- border:0;
764
+ .tds-checkbox:has(input:indeterminate){
765
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1087
766
  }
1088
767
 
1089
- .tds-date-picker-calendar-header-cell{
1090
- padding-block-end:var(--t-spacing-1);
1091
- font-size:.875em;
1092
- font-weight:var(--t-font-weight-medium);
1093
- color:var(--t-text-color-secondary);
1094
- text-align:center;
1095
- -webkit-user-select:none;
1096
- -moz-user-select:none;
1097
- user-select:none;
1098
- }
1099
-
1100
- .tds-date-picker-calendar-cell-button{
1101
- position:relative;
1102
- display:flex;
1103
- align-items:center;
1104
- justify-content:center;
1105
- inline-size:2.25em;
1106
- block-size:2.25em;
1107
- color:var(--t-text-color);
1108
- cursor:pointer;
1109
- -webkit-user-select:none;
1110
- -moz-user-select:none;
1111
- user-select:none;
1112
- outline:0;
1113
- }
1114
-
1115
- .tds-date-picker-calendar-cell-button::before{
1116
- position:absolute;
1117
- inset:0;
1118
- z-index:-1;
1119
- content:"";
1120
- background-color:var(--_background-color);
1121
- border-radius:50%;
768
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
769
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
770
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
771
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1122
772
  }
1123
773
 
1124
- .tds-date-picker-calendar-cell-button[data-today]::before{
1125
- box-shadow:inset 0 0 0 1.5px var(--t-border-color);
774
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
775
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
776
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1126
777
  }
1127
778
 
1128
- .tds-date-picker-calendar-cell-button[data-outside-month]{
1129
- display:none;
1130
- }
779
+ :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{
780
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
781
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
782
+ }
1131
783
 
1132
- .tds-date-picker-calendar-cell-button[data-hovered]{
1133
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1134
- }
784
+ :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){
785
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
786
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
787
+ }
1135
788
 
1136
- .tds-date-picker-calendar-cell-button[data-pressed]{
1137
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
1138
- }
789
+ .tds-checkbox:has(input:required) label::after{
790
+ margin-left:.25ch;
791
+ color:var(--t-text-color-status-error);
792
+ content:"*";
793
+ }
1139
794
 
1140
- .tds-date-picker-calendar-cell-button[data-selected]{
1141
- --_background-color:var(--t-fill-color-interaction);
1142
- font-weight:var(--t-font-weight-semibold);
1143
- color:var(--t-text-color-inverted);
1144
- border-color:transparent;
1145
- }
795
+ .tds-checkbox:has(input:disabled){
796
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
797
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1146
798
 
1147
- .tds-date-picker-calendar-cell-button[data-unavailable]{
1148
- color:var(--t-text-color-disabled);
1149
- text-decoration:line-through;
1150
- cursor:not-allowed;
799
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
800
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
801
+ --tds-checkbox-cursor:not-allowed;
1151
802
  }
1152
803
 
1153
- .tds-date-picker-calendar-cell-button[data-disabled]{
1154
- color:var(--t-text-color-disabled);
1155
- }
1156
-
1157
- .tds-date-picker-calendar-cell-button[data-focus-visible]{
1158
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1159
- outline-offset:-2px;
1160
- }
1161
-
1162
- .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1163
- outline-offset:var(--t-focus-ring-offset);
1164
- }
1165
-
1166
- .tds-date-picker-popover--lg{
1167
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1168
- }
1169
-
1170
-
1171
- :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{
1172
- -webkit-appearance:none;
1173
- appearance:none;
804
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
805
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1174
806
  }
1175
807
 
1176
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1177
- inline-size:1em;
1178
- block-size:2em;
1179
- }
808
+ .tds-checkbox-description{
809
+ display:flex;
810
+ grid-area:2 / 2;
811
+ gap:var(--t-spacing-half);
812
+ align-items:flex-start;
813
+ padding-inline-start:var(--t-spacing-1);
814
+ margin:0;
815
+ font-size:var(--tds-checkbox-description-font-size);
816
+ line-height:var(--tds-checkbox-description-line-height);
817
+ color:var(--tds-checkbox-description-color);
818
+ cursor:text;
819
+ }
1180
820
 
1181
- @supports (field-sizing: content){
1182
- .tds-input--auto-width{
1183
- inline-size:-moz-fit-content;
1184
- inline-size:fit-content;
1185
- min-inline-size:min(100%, 122px);
821
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
822
+ display:var(--tds-checkbox-description-invalid-icon-display);
823
+ flex-shrink:0;
824
+ margin-top:calc(.5lh - .5em);
825
+ line-height:var(--tds-checkbox-description-line-height);
1186
826
  }
1187
827
 
1188
- .tds-input--auto-width input{
1189
- field-sizing:content;
1190
- inline-size:auto;
1191
- }
828
+ .tds-checkbox--sm{
829
+ --tds-checkbox-line-height:1.35;
830
+ --tds-checkbox-input-size:var(--t-element-size-sm);
831
+ --tds-checkbox-font-size:var(--t-font-size-sm);
832
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
833
+ --tds-checkbox-description-line-height:1.3;
1192
834
  }
1193
835
 
1194
- .tds-radio-group{
1195
- --tds-radio-group-font-size:var(--t-font-size-md);
1196
- --tds-radio-group-line-height:1.4;
1197
- --tds-radio-group-gap:var(--t-spacing-1);
836
+ .tds-checkbox-group{
837
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
838
+ --tds-checkbox-group-line-height:1.4;
839
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1198
840
 
1199
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1200
- --tds-radio-group-description-line-height:1.35;
1201
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1202
- --tds-radio-group-description-invalid-icon-display:none;
841
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
842
+ --tds-checkbox-group-description-line-height:1.35;
843
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
844
+ --tds-checkbox-group-description-invalid-icon-display:none;
1203
845
  display:flex;
1204
846
  flex-direction:column;
1205
847
  gap:0;
1206
848
  padding:0;
1207
849
  margin:0;
1208
850
 
1209
- font-size:var(--tds-radio-group-font-size);
1210
- line-height:var(--tds-radio-group-line-height);
851
+ font-size:var(--tds-checkbox-group-font-size);
852
+ line-height:var(--tds-checkbox-group-line-height);
1211
853
  border:0;
1212
854
  }
1213
855
 
1214
- .tds-radio-group legend{
856
+ .tds-checkbox-group legend{
1215
857
  float:left;
1216
858
  padding:0;
1217
859
  margin:0;
1218
860
  }
1219
861
 
1220
- .tds-radio-group[aria-invalid="true"]{
1221
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1222
- --tds-radio-group-description-invalid-icon-display:inline-block;
862
+ .tds-checkbox-group[aria-invalid="true"]{
863
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
864
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1223
865
  }
1224
866
 
1225
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1226
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1227
- }
1228
-
1229
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1230
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1231
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1232
- }
1233
-
1234
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1235
- --tds-radio-input-background-color:var(--t-form-background-color);
1236
- }
1237
-
1238
- .tds-radio-group:has(input:required) legend::after{
867
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1239
868
  margin-left:.25ch;
1240
869
  color:var(--t-text-color-status-error);
1241
870
  content:"*";
1242
871
  }
1243
872
 
1244
- .tds-radio-group-fields{
873
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
874
+ content:none;
875
+ }
876
+
877
+ .tds-checkbox-group-fields{
1245
878
  display:flex;
1246
879
  flex-direction:column;
1247
- gap:var(--tds-radio-group-gap);
880
+ gap:var(--tds-checkbox-group-gap);
1248
881
  align-items:flex-start;
1249
882
  margin-top:var(--t-spacing-1);
1250
883
  }
1251
884
 
1252
- .tds-radio-group-description{
885
+ .tds-checkbox-group-description{
1253
886
  display:flex;
1254
887
  gap:var(--t-spacing-half);
1255
888
  align-items:flex-start;
1256
889
  margin:var(--t-spacing-fourth) 0 0;
1257
- font-size:var(--tds-radio-group-description-font-size);
1258
- line-height:var(--tds-radio-group-description-line-height);
1259
- color:var(--tds-radio-group-description-color);
890
+ font-size:var(--tds-checkbox-group-description-font-size);
891
+ line-height:var(--tds-checkbox-group-description-line-height);
892
+ color:var(--tds-checkbox-group-description-color);
1260
893
  cursor:text;
1261
894
  }
1262
895
 
1263
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1264
- display:var(--tds-radio-group-description-invalid-icon-display);
896
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
897
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1265
898
  flex-shrink:0;
1266
899
  margin-top:calc(.5lh - .5em);
1267
- line-height:var(--tds-radio-group-description-line-height);
900
+ line-height:var(--tds-checkbox-group-description-line-height);
1268
901
  }
1269
902
 
1270
- .tds-radio-group--sm{
1271
- --tds-radio-group-line-height:1.35;
1272
- --tds-radio-group-font-size:var(--t-font-size-sm);
1273
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1274
- --tds-radio-group-description-line-height:1.3;
903
+ .tds-checkbox-group--sm{
904
+ --tds-checkbox-group-line-height:1.35;
905
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
906
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
907
+ --tds-checkbox-group-description-line-height:1.3;
1275
908
  }
1276
909
 
1277
- .tds-time-field-input{
1278
- --tds-field-date-segment-padding-inline:1px;
1279
- padding-block:var(--tds-field-padding-block);
1280
- padding-inline:var(--tds-field-padding-inline);
1281
- font-variant-numeric:tabular-nums;
910
+ .tds-date-picker{
911
+ --tds-date-picker-button-offset:4px;
1282
912
  }
1283
913
 
1284
- .tds-number-stepper{
1285
- --tds-number-stepper-button-offset:4px;
1286
- --tds-number-stepper-button-gap:2px;
914
+ .tds-date-picker--lg{
915
+ --tds-date-picker-button-offset:5px;
1287
916
  }
1288
917
 
1289
- .tds-number-stepper--lg{
1290
- --tds-number-stepper-button-offset:5px;
1291
- --tds-number-stepper-button-gap:4px;
918
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
919
+ outline-color:transparent;
920
+ outline-offset:0;
921
+ border-color:var(--tds-field-border-color);
1292
922
  }
1293
923
 
1294
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
924
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
1295
925
  display:none;
1296
926
  }
1297
927
 
1298
- .tds-number-stepper-input{
1299
- display:flex;
928
+ .tds-date-picker-input{
1300
929
  flex:1;
1301
- align-items:center;
1302
- min-inline-size:0;
1303
930
  padding-block:var(--tds-field-padding-block);
1304
931
  padding-inline:var(--tds-field-padding-inline);
1305
- font-family:inherit;
1306
- font-size:inherit;
1307
- color:inherit;
1308
- outline:0;
1309
- background:transparent;
1310
- border:0;
932
+ overflow:auto clip;
933
+ font-variant-numeric:tabular-nums;
934
+ text-wrap:nowrap;
935
+ scrollbar-width:none;
1311
936
  }
1312
937
 
1313
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1314
- margin:0;
1315
- -webkit-appearance:none;
1316
- appearance:none;
938
+ .tds-date-picker-input:has( + .tds-date-picker-button){
939
+ padding-inline-end:0;
1317
940
  }
1318
941
 
1319
- .tds-number-stepper-button{
942
+ .tds-date-picker-button{
1320
943
  flex-shrink:0;
1321
944
  align-self:center;
1322
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1323
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
945
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
946
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1324
947
  padding:0;
948
+ margin-inline-end:var(--tds-date-picker-button-offset);
1325
949
  }
1326
950
 
1327
- .tds-number-stepper-button + .tds-number-stepper-button{
1328
- margin-inline-start:var(--tds-number-stepper-button-gap);
1329
- }
1330
-
1331
- .tds-number-stepper-button:last-of-type{
1332
- margin-inline-end:var(--tds-number-stepper-button-offset);
1333
- }
951
+ .tds-date-picker-popover{
952
+ --tds-date-picker-popover-font-size:var(--t-font-size-md);
953
+ --tds-date-picker-popover-padding:var(--t-spacing-1-half);
954
+ --tds-date-picker-popover-background-color:var(--t-surface-color-card);
955
+ --tds-date-picker-popover-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
956
+ --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
957
+ --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
958
+ --tds-date-picker-popover-interactive-property:color, background-color, border-color;
1334
959
 
1335
- .tds-input:has(textarea){
1336
- --tds-input-padding-block:6px;
1337
- --tds-input-resizer-size:var(--t-element-size-sm);
1338
- --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");
960
+ position:relative;
961
+ overflow:hidden;
962
+ background-color:var(--tds-date-picker-popover-background-color);
963
+ border:var(--t-border-width) solid var(--t-border-color);
964
+ border-radius:var(--t-border-radius);
965
+ box-shadow:var(--tds-date-picker-popover-shadow);
1339
966
  }
1340
967
 
1341
- @supports (x: attr(x type(*))){
968
+ .tds-date-picker-popover[data-entering]{
969
+ animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
970
+ }
1342
971
 
1343
- .tds-input textarea{
1344
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1345
- }
972
+ .tds-date-picker-popover[data-exiting]{
973
+ animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
1346
974
  }
1347
975
 
1348
- .tds-input.tds-textarea--resize-vertical textarea{
1349
- resize:vertical;
1350
- }
976
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
977
+ will-change:opacity, transform;
978
+ }
1351
979
 
1352
- .tds-input.tds-textarea--resize-none textarea{
1353
- resize:none;
1354
- }
980
+ @keyframes tds-date-picker-popover{
981
+ from{
982
+ opacity:0;
983
+ transform:translateY(-8px);
984
+ }
985
+ }
1355
986
 
1356
- .tds-input.tds-textarea--resize-auto textarea{
1357
- resize:vertical;
987
+ @media (prefers-reduced-motion: reduce){
988
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
989
+ animation:none;
1358
990
  }
991
+ }
1359
992
 
1360
- @supports (field-sizing: content){
1361
- .tds-input.tds-textarea--resize-auto textarea{
1362
- field-sizing:content;
1363
- resize:none;
1364
- }
1365
- }
993
+ .tds-date-picker-overlay{
994
+ position:absolute;
995
+ inset:0;
996
+ z-index:1;
997
+ display:flex;
998
+ background-color:var(--tds-date-picker-popover-background-color);
999
+ }
1366
1000
 
1367
- .tds-input textarea{
1368
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1369
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1370
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1371
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1372
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1373
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1374
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1375
- --tds-input-scrollbar-thumb-border-radius:999px;
1376
- --tds-input-scrollbar-thumb-border-width:3px;
1377
- --tds-input-scrollbar-track-margin-block:.125rem;
1378
- scrollbar-color:initial;
1379
- transition-timing-function:var(--t-ease-in-out);
1380
- transition-duration:var(--t-duration-200);
1381
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1001
+ .tds-date-picker-overlay-list{
1002
+ display:grid;
1003
+ flex:1;
1004
+ grid-template-columns:repeat(3, 1fr);
1005
+ gap:var(--t-spacing-half);
1006
+ padding-inline:var(--tds-date-picker-popover-padding);
1007
+ outline:0;
1008
+ scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
1009
+ scrollbar-width:thin;
1382
1010
  }
1383
1011
 
1384
- @media (pointer: fine){
1385
- :is(.tds-input textarea)::-webkit-scrollbar{
1386
- width:12px;
1387
- height:12px;
1388
- cursor:default;
1389
- }
1390
-
1391
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1392
- cursor:default;
1393
- background:var(--tds-input-scrollbar-thumb-color);
1394
- background-clip:content-box;
1395
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1396
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1397
- }
1398
-
1399
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1400
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1401
- }
1402
-
1403
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1404
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1405
- }
1406
-
1407
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1408
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1409
- }
1410
-
1411
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1412
- background:var(--tds-input-scrollbar-surface-color);
1413
- }
1012
+ .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
1013
+ grid-template-rows:repeat(4, 1fr);
1014
+ padding-bottom:var(--tds-date-picker-popover-padding);
1015
+ }
1414
1016
 
1415
- :is(.tds-input textarea)::-webkit-resizer{
1416
- background:var(--tds-input-resizer-icon) no-repeat;
1417
- background-position:right bottom;
1418
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1419
- }
1017
+ .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
1018
+ grid-auto-rows:var(--t-container-size-xl);
1019
+ padding-right:var(--t-spacing-1);
1020
+ overflow-y:auto;
1021
+ scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
1022
+ }
1420
1023
 
1421
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1422
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1423
- cursor:default;
1424
- }
1024
+ .tds-date-picker-overlay-cell{
1025
+ display:flex;
1026
+ align-items:center;
1027
+ justify-content:center;
1028
+ font-family:inherit;
1029
+ font-size:var(--tds-date-picker-popover-font-size);
1030
+ color:var(--t-text-color);
1031
+ cursor:pointer;
1032
+ outline:0;
1033
+ background-color:transparent;
1034
+ border:0;
1035
+ border-radius:var(--t-border-radius-md);
1036
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1037
+ transition-duration:var(--t-duration-100);
1038
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1039
+ }
1425
1040
 
1426
- @supports (-moz-appearance: none){
1427
- :is(.tds-input textarea){
1428
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1429
- scrollbar-width:thin;
1430
- }
1041
+ .tds-date-picker-overlay-cell[data-hovered]{
1042
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
1043
+ }
1431
1044
 
1432
- @media (hover){
1433
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1434
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1435
- }
1436
- }
1437
- }
1045
+ .tds-date-picker-overlay-cell[data-pressed]{
1046
+ background-color:var(--t-fill-color-button-neutral-outline-active);
1438
1047
  }
1439
1048
 
1440
- .tds-radio{
1441
- --tds-radio-font-size:var(--t-font-size-md);
1442
- --tds-radio-cursor:pointer;
1443
- --tds-radio-line-height:1.4;
1444
- --tds-radio-transition-property:border-width;
1049
+ .tds-date-picker-overlay-cell[data-selected]{
1050
+ font-weight:var(--t-font-weight-semibold);
1051
+ color:var(--t-text-color-inverted);
1052
+ background-color:var(--t-fill-color-interaction);
1053
+ }
1445
1054
 
1446
- --tds-radio-input-size:var(--t-element-size-md);
1447
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1448
- --tds-radio-input-border-color:var(--t-form-border-color);
1449
- --tds-radio-input-border-width:var(--t-form-border-width);
1450
- --tds-radio-input-background-color:var(--t-form-background-color);
1055
+ .tds-date-picker-overlay-cell[data-focus-visible]{
1056
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1057
+ }
1451
1058
 
1452
- --tds-radio-label-color:var(--t-form-color);
1059
+ .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
1060
+ outline-offset:var(--t-focus-ring-offset);
1061
+ }
1453
1062
 
1454
- --tds-radio-description-font-size:var(--t-font-size-sm);
1455
- --tds-radio-description-line-height:1.35;
1456
- --tds-radio-description-color:var(--t-text-color-secondary);
1063
+ .tds-date-picker-calendar-heading{
1064
+ display:flex;
1065
+ flex:1;
1066
+ gap:var(--t-spacing-1);
1067
+ align-items:center;
1068
+ justify-content:flex-start;
1069
+ padding-inline-start:4px;
1070
+ }
1457
1071
 
1072
+ .tds-date-picker-calendar-overlay-trigger{
1073
+ --_background-color:transparent;
1458
1074
  position:relative;
1459
- display:inline-grid;
1460
- grid-template-columns:auto;
1461
- grid-auto-columns:1fr;
1462
- gap:var(--t-spacing-fourth) 0;
1463
- line-height:var(--tds-radio-line-height);
1464
- -webkit-user-select:none;
1465
- -moz-user-select:none;
1466
- user-select:none;
1075
+ padding:0;
1076
+ font-family:inherit;
1077
+ font-size:var(--tds-date-picker-popover-font-size);
1078
+ font-weight:var(--t-font-weight-semibold);
1079
+ font-feature-settings:"ss01", "ss02";
1080
+ color:var(--t-text-color);
1081
+ cursor:pointer;
1082
+ outline:0;
1083
+ background-color:transparent;
1084
+ border:0;
1085
+ border-radius:var(--t-border-radius-md);
1086
+ isolation:isolate;
1087
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1088
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
1089
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1467
1090
  }
1468
1091
 
1469
- .tds-radio label{
1470
- grid-area:1 / 2;
1471
- padding-inline-start:var(--t-spacing-1);
1472
- font-size:var(--tds-radio-font-size);
1473
- font-weight:var(--t-font-weight-normal);
1474
- color:var(--tds-radio-label-color);
1475
- cursor:var(--tds-radio-cursor);
1092
+ .tds-date-picker-calendar-overlay-trigger::before{
1093
+ position:absolute;
1094
+ inset:calc(var(--t-spacing-half) * -1);
1095
+ z-index:-1;
1096
+ pointer-events:inherit;
1097
+ content:"";
1098
+ background-color:var(--_background-color);
1099
+ border-radius:inherit;
1476
1100
  }
1477
1101
 
1478
- .tds-radio input[type="radio"]{
1479
- position:relative;
1480
- width:1em;
1481
- height:1em;
1482
- margin:calc((1lh - 1em) / 2) 0 0;
1483
- font-size:var(--tds-radio-font-size);
1484
- line-height:inherit;
1485
- -webkit-appearance:none;
1486
- -moz-appearance:none;
1487
- appearance:none;
1488
- cursor:var(--tds-radio-cursor);
1489
- background-color:var(--tds-radio-input-background-color);
1490
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1491
- border-radius:var(--tds-radio-input-border-radius);
1492
- transition-timing-function:var(--t-ease-in-out);
1493
- transition-duration:var(--t-duration-200);
1494
- transition-property:var(--tds-radio-transition-property);
1102
+ .tds-date-picker-calendar-overlay-trigger[data-hovered]{
1103
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1495
1104
  }
1496
1105
 
1497
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1498
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1499
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1500
- }
1501
-
1502
- :is(.tds-radio input[type="radio"]):focus-visible{
1503
- outline:var(--t-focus-ring-outline);
1504
- outline-offset:var(--t-focus-ring-offset);
1505
- }
1506
-
1507
- :is(.tds-radio input[type="radio"]):disabled{
1508
- pointer-events:none;
1509
- }
1510
-
1511
- @media (prefers-reduced-motion: reduce){
1512
-
1513
- .tds-radio input[type="radio"]{
1514
- --tds-radio-transition-property:none;
1106
+ .tds-date-picker-calendar-overlay-trigger[data-pressed]{
1107
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
1515
1108
  }
1516
- }
1517
1109
 
1518
- .tds-radio:has(input:checked){
1519
- --tds-radio-input-background-color:var(--t-form-background-color);
1520
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1521
- --tds-radio-input-border-width:4px;
1110
+ .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
1111
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1112
+ outline-offset:var(--t-focus-ring-offset);
1522
1113
  }
1523
1114
 
1524
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1525
- --tds-radio-input-background-color:var(--t-form-background-color);
1526
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1527
- }
1115
+ .tds-date-picker-calendar{
1116
+ inline-size:-moz-fit-content;
1117
+ inline-size:fit-content;
1118
+ font-size:var(--tds-date-picker-popover-font-size);
1119
+ }
1528
1120
 
1529
- .tds-radio:has(input:user-invalid){
1530
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1531
- }
1121
+ .tds-date-picker-calendar-body{
1122
+ position:relative;
1123
+ padding:var(--tds-date-picker-popover-padding);
1124
+ padding-block-start:0;
1125
+ }
1532
1126
 
1533
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1534
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1535
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1536
- }
1127
+ .tds-date-picker-calendar-header{
1128
+ display:flex;
1129
+ align-items:center;
1130
+ justify-content:space-between;
1131
+ padding:var(--tds-date-picker-popover-padding);
1132
+ }
1537
1133
 
1538
- .tds-radio:has(input:disabled){
1539
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1540
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1134
+ .tds-date-picker-calendar-title{
1135
+ padding:var(--t-spacing-half) var(--t-spacing-1);
1136
+ font-size:var(--tds-date-picker-popover-font-size);
1137
+ font-weight:var(--t-font-weight-semibold);
1138
+ }
1541
1139
 
1542
- --tds-radio-label-color:var(--t-form-color-disabled);
1543
- --tds-radio-description-color:var(--t-form-color-disabled);
1544
- --tds-radio-cursor:not-allowed;
1545
- }
1546
-
1547
- .tds-radio:has(input:disabled) input:checked{
1548
- --tds-radio-input-background-color:var(--t-form-background-color);
1549
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1550
- }
1551
-
1552
- .tds-radio-description{
1140
+ .tds-date-picker-calendar-nav{
1553
1141
  display:flex;
1554
- grid-area:2 / 2;
1555
- gap:var(--t-spacing-half);
1556
- align-items:flex-start;
1557
- padding-inline-start:var(--t-spacing-1);
1558
- margin:0;
1559
- font-size:var(--tds-radio-description-font-size);
1560
- line-height:var(--tds-radio-description-line-height);
1561
- color:var(--tds-radio-description-color);
1562
- cursor:text;
1142
+ align-items:center;
1143
+ justify-content:center;
1144
+ padding:var(--t-spacing-half);
1145
+ font-size:.875em;
1146
+ color:var(--t-text-color);
1147
+ cursor:pointer;
1148
+ outline:0;
1149
+ background-color:transparent;
1150
+ border:0;
1151
+ border-radius:var(--t-border-radius-md);
1152
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1153
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
1154
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1563
1155
  }
1564
1156
 
1565
- .tds-radio--sm{
1566
- --tds-radio-line-height:1.35;
1567
- --tds-radio-input-size:var(--t-element-size-sm);
1568
- --tds-radio-font-size:var(--t-font-size-sm);
1569
- --tds-radio-description-font-size:var(--t-font-size-xs);
1570
- --tds-radio-description-line-height:1.3;
1571
- }
1157
+ .tds-date-picker-calendar-nav[data-hovered]{
1158
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
1159
+ }
1572
1160
 
1573
- .tds-toggle-switch{
1574
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1575
- --tds-toggle-switch-cursor:pointer;
1576
- --tds-toggle-switch-display:inline-grid;
1577
- --tds-toggle-switch-line-height:1.4;
1161
+ .tds-date-picker-calendar-nav[data-pressed]{
1162
+ background-color:var(--t-fill-color-button-neutral-outline-active);
1163
+ }
1578
1164
 
1579
- --tds-toggle-switch-label-color:var(--t-form-color);
1165
+ .tds-date-picker-calendar-nav[data-focus-visible]{
1166
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1167
+ outline-offset:var(--t-focus-ring-offset);
1168
+ }
1580
1169
 
1581
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1582
- --tds-toggle-switch-track-outline:none;
1583
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1584
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1585
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1170
+ .tds-date-picker-calendar-nav[data-disabled]{
1171
+ color:var(--t-text-color-disabled);
1172
+ cursor:not-allowed;
1173
+ }
1586
1174
 
1587
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1588
- --tds-toggle-switch-thumb-transform:translateX(0);
1589
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1175
+ .tds-date-picker-calendar-grid{
1176
+ font-feature-settings:"ss01", "ss02";
1177
+ border-collapse:collapse;
1178
+ }
1590
1179
 
1591
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1592
- --tds-toggle-switch-description-line-height:1.35;
1593
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1594
- position:relative;
1180
+ .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
1181
+ padding:0;
1182
+ border:0;
1183
+ }
1595
1184
 
1596
- display:var(--tds-toggle-switch-display);
1597
- grid-template-columns:auto;
1598
- grid-auto-columns:1fr;
1599
- gap:var(--t-spacing-fourth) 0;
1185
+ .tds-date-picker-calendar-header-cell{
1186
+ padding-block-end:var(--t-spacing-1);
1187
+ font-size:.875em;
1188
+ font-weight:var(--t-font-weight-medium);
1189
+ color:var(--t-text-color-secondary);
1190
+ text-align:center;
1600
1191
  -webkit-user-select:none;
1601
1192
  -moz-user-select:none;
1602
1193
  user-select:none;
1603
1194
  }
1604
1195
 
1605
- .tds-toggle-switch input[type="checkbox"]{
1196
+ .tds-date-picker-calendar-cell-button{
1197
+ position:relative;
1198
+ display:flex;
1199
+ align-items:center;
1200
+ justify-content:center;
1201
+ inline-size:2.25em;
1202
+ block-size:2.25em;
1203
+ color:var(--t-text-color);
1204
+ cursor:pointer;
1205
+ -webkit-user-select:none;
1206
+ -moz-user-select:none;
1207
+ user-select:none;
1208
+ outline:0;
1209
+ }
1210
+
1211
+ .tds-date-picker-calendar-cell-button::before{
1606
1212
  position:absolute;
1607
- width:var(--tds-toggle-switch-track-width);
1608
- height:var(--tds-toggle-switch-track-height);
1609
- margin:0;
1610
- -webkit-appearance:none;
1611
- -moz-appearance:none;
1612
- appearance:none;
1613
- cursor:var(--tds-toggle-switch-cursor);
1614
- outline:var(--tds-toggle-switch-track-outline);
1615
- outline-offset:var(--t-focus-ring-offset);
1616
- background-color:transparent;
1617
- border:0;
1618
- border-radius:var(--t-border-radius-round);
1213
+ inset:0;
1214
+ z-index:-1;
1215
+ content:"";
1216
+ background-color:var(--_background-color);
1217
+ border-radius:50%;
1619
1218
  }
1620
1219
 
1621
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1622
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1220
+ .tds-date-picker-calendar-cell-button[data-today]::before{
1221
+ box-shadow:inset 0 0 0 1.5px var(--t-border-color);
1623
1222
  }
1624
1223
 
1625
- .tds-toggle-switch label{
1626
- display:inline-flex;
1627
- grid-area:1 / 2;
1628
- padding-inline-start:var(--t-spacing-1);
1629
- margin-top:-.09375em;
1630
- font-size:var(--tds-toggle-switch-font-size);
1631
- font-weight:var(--t-font-weight-normal);
1632
- line-height:var(--tds-toggle-switch-line-height);
1633
- color:var(--tds-toggle-switch-label-color);
1634
- cursor:var(--tds-toggle-switch-cursor);
1224
+ .tds-date-picker-calendar-cell-button[data-outside-month]{
1225
+ display:none;
1635
1226
  }
1636
1227
 
1637
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1638
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1228
+ .tds-date-picker-calendar-cell-button[data-hovered]{
1229
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1639
1230
  }
1640
1231
 
1641
- .tds-toggle-switch:has(input:checked){
1642
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1643
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1232
+ .tds-date-picker-calendar-cell-button[data-pressed]{
1233
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
1644
1234
  }
1645
1235
 
1646
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1647
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1648
- }
1236
+ .tds-date-picker-calendar-cell-button[data-selected]{
1237
+ --_background-color:var(--t-fill-color-interaction);
1238
+ font-weight:var(--t-font-weight-semibold);
1239
+ color:var(--t-text-color-inverted);
1240
+ border-color:transparent;
1241
+ }
1649
1242
 
1650
- .tds-toggle-switch:has(input:disabled){
1651
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1652
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1653
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1654
- --tds-toggle-switch-cursor:not-allowed;
1243
+ .tds-date-picker-calendar-cell-button[data-unavailable]{
1244
+ color:var(--t-text-color-disabled);
1245
+ text-decoration:line-through;
1246
+ cursor:not-allowed;
1655
1247
  }
1656
1248
 
1657
- .tds-toggle-switch-track{
1658
- position:relative;
1659
- flex-shrink:0;
1660
- width:var(--tds-toggle-switch-track-width);
1661
- height:var(--tds-toggle-switch-track-height);
1662
- background-color:var(--tds-toggle-switch-track-background-color);
1663
- border-radius:var(--t-border-radius-round);
1664
- transition:var(--tds-toggle-switch-track-transition);
1665
- }
1249
+ .tds-date-picker-calendar-cell-button[data-disabled]{
1250
+ color:var(--t-text-color-disabled);
1251
+ }
1666
1252
 
1667
- .tds-toggle-switch-track::before{
1668
- position:absolute;
1669
- top:var(--t-spacing-fourth);
1670
- left:var(--t-spacing-fourth);
1671
- width:var(--tds-toggle-switch-thumb-size);
1672
- height:var(--tds-toggle-switch-thumb-size);
1673
- content:"";
1674
- background-color:#fff;
1675
- border-radius:var(--t-border-radius-round);
1676
- transform:var(--tds-toggle-switch-thumb-transform);
1677
- transition:var(--tds-toggle-switch-thumb-transition);
1253
+ .tds-date-picker-calendar-cell-button[data-focus-visible]{
1254
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1255
+ outline-offset:-2px;
1678
1256
  }
1679
1257
 
1680
- @media (prefers-reduced-motion: reduce){
1258
+ .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1259
+ outline-offset:var(--t-focus-ring-offset);
1260
+ }
1681
1261
 
1682
- .tds-toggle-switch-track{
1683
- --tds-toggle-switch-track-transition:none;
1684
- --tds-toggle-switch-thumb-transition:none;
1262
+ .tds-date-picker-popover--lg{
1263
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1264
+ }
1265
+
1266
+ .tds-combo-box{
1267
+ --tds-combo-box-button-offset:4px;
1685
1268
  }
1269
+
1270
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
1271
+ transform:rotate(.5turn);
1686
1272
  }
1687
1273
 
1688
- .tds-toggle-switch-description{
1689
- display:flex;
1690
- grid-area:2 / 2;
1691
- align-items:flex-start;
1692
- padding-inline-start:var(--t-spacing-1);
1693
- margin:0;
1694
- font-size:var(--tds-toggle-switch-description-font-size);
1695
- line-height:var(--tds-toggle-switch-description-line-height);
1696
- color:var(--tds-toggle-switch-description-color);
1697
- cursor:text;
1274
+ .tds-combo-box--lg{
1275
+ --tds-combo-box-button-offset:5px;
1698
1276
  }
1699
1277
 
1700
- .tds-toggle-switch--sm{
1701
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1702
- --tds-toggle-switch-line-height:1.35;
1703
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1704
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1705
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1706
- --tds-toggle-switch-description-line-height:1.3;
1278
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1279
+ display:none;
1707
1280
  }
1708
1281
 
1709
- .tds-toggle-switch--hide-label{
1710
- --tds-toggle-switch-display:inline-flex;
1282
+ .tds-combo-box-input{
1283
+ display:flex;
1284
+ flex:1;
1285
+ align-items:center;
1286
+ padding-block:var(--tds-field-padding-block);
1287
+ padding-inline:var(--tds-field-padding-inline);
1288
+ font-family:inherit;
1289
+ font-size:inherit;
1290
+ color:inherit;
1291
+ outline:0;
1292
+ background:transparent;
1293
+ border:0;
1711
1294
  }
1712
1295
 
1713
- .tds-input{
1714
- --tds-input-border-color:var(--t-form-border-color);
1715
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
1716
- --tds-input-background-color:var(--t-form-background-color);
1717
- --tds-input-color:var(--t-form-color);
1718
- --tds-input-font-size:var(--t-font-size-md);
1719
- --tds-input-description-color:var(--t-text-color-secondary);
1720
- --tds-input-description-invalid-icon-display:none;
1721
- --tds-input-min-height:var(--t-container-size-md);
1722
- --tds-input-padding-inline:var(--t-spacing-1);
1296
+ .tds-combo-box-input:has( + .tds-combo-box-button){
1297
+ padding-inline-end:0;
1298
+ }
1723
1299
 
1724
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
1725
-
1726
- display:flex;
1727
- flex-direction:column;
1728
- gap:var(--t-spacing-half);
1729
- }
1730
-
1731
- .tds-input label{
1732
- font-size:var(--t-font-size-md);
1733
- font-weight:var(--t-font-weight-normal);
1734
- color:var(--t-text-color);
1300
+ .tds-combo-box-input::-moz-placeholder{
1301
+ color:var(--tds-field-placeholder-color);
1302
+ -moz-user-select:none;
1303
+ user-select:none;
1735
1304
  }
1736
1305
 
1737
- .tds-input :is(input,textarea){
1738
- inline-size:100%;
1739
- block-size:auto;
1740
- min-block-size:var(--tds-input-min-height);
1741
- padding-block:var(--tds-input-padding-block);
1742
- padding-inline:var(--tds-input-padding-inline);
1743
- font-family:inherit;
1744
- font-size:var(--tds-input-font-size);
1745
- color:var(--tds-input-color);
1746
- -webkit-appearance:none;
1747
- -moz-appearance:none;
1748
- appearance:none;
1749
- outline:var(--t-focus-ring-width) solid transparent;
1750
- outline-offset:0;
1751
- background-color:var(--tds-input-background-color);
1752
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
1753
- border-radius:var(--t-form-border-radius);
1754
- transition-timing-function:var(--t-ease-in-out);
1755
- transition-duration:var(--t-duration-200);
1756
- transition-property:var(--tds-input-transition-property);
1306
+ .tds-combo-box-input::placeholder{
1307
+ color:var(--tds-field-placeholder-color);
1308
+ -webkit-user-select:none;
1309
+ -moz-user-select:none;
1310
+ user-select:none;
1757
1311
  }
1758
1312
 
1759
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
1760
- border-color:var(--tds-input-border-color-hover);
1761
- }
1762
-
1763
- :is(.tds-input :is(input,textarea)):focus{
1764
- outline-color:transparent;
1765
- }
1766
-
1767
- :is(.tds-input :is(input,textarea)):focus-visible{
1768
- outline-color:var(--t-focus-ring-color);
1769
- outline-offset:var(--t-focus-ring-offset);
1770
- border-color:var(--t-form-border-color-focus);
1771
- }
1772
-
1773
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
1774
- color:var(--t-form-placeholder-color);
1775
- -moz-user-select:none;
1776
- user-select:none;
1777
- }
1313
+ .tds-combo-box-button{
1314
+ flex-shrink:0;
1315
+ align-self:center;
1316
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1317
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1318
+ padding:0;
1319
+ margin-inline-end:var(--tds-combo-box-button-offset);
1320
+ }
1778
1321
 
1779
- :is(.tds-input :is(input,textarea))::placeholder{
1780
- color:var(--t-form-placeholder-color);
1781
- -webkit-user-select:none;
1782
- -moz-user-select:none;
1783
- user-select:none;
1784
- }
1322
+ .tds-combo-box-button > svg{
1323
+ inline-size:var(--tds-field-font-size);
1324
+ block-size:var(--tds-field-font-size);
1325
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
1326
+ }
1785
1327
 
1786
- @media (prefers-reduced-motion: reduce){
1328
+ .tds-combo-box-popover{
1329
+ width:var(--trigger-width);
1330
+ max-block-size:inherit;
1331
+ padding:var(--t-spacing-1);
1332
+ overflow:auto;
1333
+ scroll-behavior:smooth;
1334
+ overscroll-behavior:none;
1335
+ -webkit-user-select:none;
1336
+ -moz-user-select:none;
1337
+ user-select:none;
1338
+ outline:0;
1339
+ scrollbar-color:#0004 var(--t-surface-color-card);
1340
+ scrollbar-width:thin;
1341
+ background:var(--t-surface-color-card);
1342
+ background-clip:padding-box;
1343
+ border:1px solid var(--t-border-color);
1344
+ border-radius:var(--t-border-radius);
1345
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1346
+ }
1787
1347
 
1788
- .tds-input :is(input,textarea){
1789
- --tds-input-transition-property:none;
1348
+ .tds-combo-box-popover[data-entering]{
1349
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1790
1350
  }
1791
- }
1792
1351
 
1793
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
1794
- --tds-input-background-color:var(--t-form-background-color-error);
1795
- --tds-input-border-color:var(--t-form-border-color-error);
1796
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1797
- --tds-input-description-color:var(--t-text-color-status-error);
1798
- --tds-input-description-invalid-icon-display:inline-block;
1352
+ .tds-combo-box-popover[data-exiting]{
1353
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1799
1354
  }
1800
1355
 
1801
- .tds-input:has(:is(input,textarea):required) label::after{
1802
- margin-left:.25ch;
1803
- color:var(--t-text-color-status-error);
1804
- content:"*";
1805
- }
1806
-
1807
- .tds-input:where(:has(:is(input,textarea):disabled)){
1808
- --tds-input-border-color:var(--t-form-border-color-disabled);
1809
- --tds-input-background-color:var(--t-form-background-color-disabled);
1810
- --tds-input-color:var(--t-form-color-disabled);
1356
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1357
+ will-change:opacity, transform;
1811
1358
  }
1812
1359
 
1813
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
1814
- cursor:not-allowed;
1815
- }
1816
-
1817
- .tds-input:where(:has(:is(input,textarea)[readonly])){
1818
- --tds-input-border-color:var(--t-form-border-color-readonly);
1819
- --tds-input-background-color:var(--t-form-background-color-readonly);
1360
+ @keyframes tds-combo-box-popover{
1361
+ from{
1362
+ opacity:0;
1363
+ transform:translateY(-8px);
1820
1364
  }
1365
+ }
1821
1366
 
1822
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
1823
- border-color:var(--tds-input-border-color-hover);
1367
+ @media (prefers-reduced-motion: reduce){
1368
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1369
+ animation:none;
1824
1370
  }
1825
1371
 
1826
- .tds-input.tds-input--lg{
1827
- --tds-input-min-height:var(--t-container-size-lg);
1828
- --tds-input-font-size:var(--t-font-size-lg);
1372
+ .tds-combo-box-button > svg{
1373
+ transition:none;
1829
1374
  }
1375
+ }
1830
1376
 
1831
- .tds-input-description{
1832
- display:flex;
1833
- gap:var(--t-spacing-half);
1834
- align-items:flex-start;
1377
+ .tds-combo-box-list{
1378
+ padding:0;
1835
1379
  margin:0;
1836
- font-size:var(--t-font-size-sm);
1837
- line-height:1.35;
1838
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
1839
- cursor:text;
1840
1380
  }
1841
1381
 
1842
- .tds-input-description .tds-input-description-invalid-icon{
1843
- display:var(--tds-input-description-invalid-icon-display, none);
1844
- flex-shrink:0;
1845
- margin-block-start:calc(.5lh - .5em);
1846
- line-height:1.35;
1847
- }
1848
-
1849
- .tds-field{
1850
- --tds-field-border-color:var(--t-form-border-color);
1851
- --tds-field-border-color-hover:var(--t-form-border-color-hover);
1852
- --tds-field-border-color-active:var(--t-form-border-color-focus);
1853
- --tds-field-background-color:var(--t-form-background-color);
1854
- --tds-field-color:var(--t-form-color);
1855
- --tds-field-placeholder-color:var(--t-form-placeholder-color);
1856
- --tds-field-font-size:var(--t-font-size-md);
1857
- --tds-field-min-height:var(--t-container-size-md);
1858
- --tds-field-padding-block:6px;
1859
- --tds-field-padding-inline:var(--t-spacing-1);
1860
- --tds-field-description-color:var(--t-text-color-secondary);
1861
- --tds-field-description-invalid-icon-display:none;
1862
-
1863
- position:relative;
1864
- display:flex;
1865
- flex-direction:column;
1866
- gap:var(--t-spacing-half);
1382
+ .tds-combo-box-list-item{
1383
+ display:block;
1384
+ padding-block:var(--t-spacing-1);
1385
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1386
+ overflow:hidden;
1387
+ text-overflow:ellipsis;
1388
+ font-size:1rem;
1389
+ color:var(--t-text-color);
1390
+ white-space:nowrap;
1391
+ cursor:default;
1392
+ border-radius:var(--t-border-radius);
1867
1393
  }
1868
1394
 
1869
- .tds-field[data-required] .tds-field-label::after{
1870
- margin-left:.25ch;
1871
- color:var(--t-text-color-status-error);
1872
- content:"*";
1395
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1396
+ background:var(--t-fill-color-neutral-070);
1873
1397
  }
1874
1398
 
1875
- .tds-field[data-invalid]{
1876
- --tds-field-border-color:var(--t-form-border-color-error);
1877
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1878
- --tds-field-border-color-active:var(--t-form-border-color-error-hover);
1879
- --tds-field-background-color:var(--t-form-background-color-error);
1880
- --tds-field-description-color:var(--t-text-color-status-error);
1881
- --tds-field-description-invalid-icon-display:inline-block;
1399
+ .tds-combo-box-list-item[data-selected]{
1400
+ background:var(--t-fill-color-button-interaction-ghost-active);
1882
1401
  }
1883
1402
 
1884
- .tds-field[data-disabled]{
1885
- --tds-field-border-color:var(--t-form-border-color-disabled);
1886
- --tds-field-background-color:var(--t-form-background-color-disabled);
1887
- --tds-field-color:var(--t-form-color-disabled);
1888
- --tds-field-placeholder-color:var(--t-form-color-disabled);
1403
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1404
+ background:var(--t-fill-color-neutral-060);
1889
1405
  }
1890
1406
 
1891
- .tds-field[data-disabled] .tds-field-control{
1892
- cursor:not-allowed;
1407
+ .tds-combo-box-list-item[data-disabled]{
1408
+ color:var(--t-form-color-disabled);
1409
+ cursor:not-allowed;
1410
+ }
1411
+
1412
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
1413
+ background:transparent;
1893
1414
  }
1894
1415
 
1895
- .tds-field--lg{
1896
- --tds-field-min-height:var(--t-container-size-lg);
1897
- --tds-field-font-size:var(--t-font-size-lg);
1416
+ .tds-combo-box-empty-state{
1417
+ position:relative;
1418
+ min-block-size:var(--t-spacing-3);
1419
+ padding-block:var(--t-spacing-1);
1420
+ padding-inline:var(--t-spacing-2);
1421
+ font-size:var(--t-font-size-md);
1422
+ color:var(--t-text-color-secondary);
1898
1423
  }
1899
1424
 
1900
- .tds-field-label{
1901
- font-size:var(--t-font-size-md);
1902
- font-weight:var(--t-font-weight-normal);
1903
- color:var(--t-text-color);
1904
- cursor:default;
1425
+ .tds-combo-box-load-more{
1426
+ position:relative;
1427
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1905
1428
  }
1906
1429
 
1907
- .tds-field-control{
1908
- display:flex;
1909
- align-items:center;
1910
- inline-size:100%;
1911
- min-block-size:var(--tds-field-min-height);
1912
- font-family:inherit;
1913
- font-size:var(--tds-field-font-size);
1914
- line-height:1;
1915
- color:var(--tds-field-color);
1916
- -webkit-appearance:none;
1917
- -moz-appearance:none;
1918
- appearance:none;
1919
- cursor:text;
1920
- outline:var(--t-focus-ring-width) solid transparent;
1921
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
1922
- outline-offset:0;
1923
- background-color:var(--tds-field-background-color);
1924
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
1925
- border-radius:var(--t-form-border-radius);
1926
- transition-timing-function:var(--t-ease-in-out);
1927
- transition-duration:var(--t-duration-200);
1928
- transition-property:background-color, border-color, outline-color, outline-offset;
1430
+ .tds-combo-box-empty-state,
1431
+ .tds-combo-box-load-more{
1432
+ --tds-loading-spinner-visibility:visible;
1433
+ --tds-loading-spinner-animation-play-state:running;
1929
1434
  }
1930
1435
 
1931
- .tds-field-control[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
1932
- border-color:var(--tds-field-border-color-hover);
1933
- }
1934
-
1935
- .tds-field-control[data-focus-within]{
1936
- outline-color:var(--t-focus-ring-color);
1937
- outline-offset:var(--t-focus-ring-offset);
1938
- border-color:var(--tds-field-border-color-active);
1939
- }
1940
-
1941
- .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
1942
- --tds-field-border-color:var(--t-form-border-color-readonly);
1943
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1944
- --tds-field-background-color:var(--t-form-background-color-readonly);
1945
- color:var(--t-form-color-readonly);
1436
+ .tds-combo-box-list-section:not(:first-child){
1437
+ margin-block-start:var(--t-spacing-half);
1946
1438
  }
1947
1439
 
1948
- [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
1949
- border-color:var(--t-form-border-color-hover);
1950
- }
1951
-
1952
- .tds-field-description{
1953
- display:flex;
1954
- gap:var(--t-spacing-half);
1955
- align-items:flex-start;
1956
- margin:0;
1440
+ .tds-combo-box-section-header{
1441
+ padding-block:var(--t-spacing-1);
1442
+ padding-inline:var(--t-spacing-1);
1957
1443
  font-size:var(--t-font-size-sm);
1958
- line-height:1.35;
1959
- color:var(--tds-field-description-color, var(--t-text-color-secondary));
1960
- cursor:text;
1444
+ font-weight:var(--t-font-weight-semibold);
1445
+ color:var(--t-text-color-secondary);
1961
1446
  }
1962
1447
 
1963
- .tds-field-description .tds-field-description-invalid-icon{
1964
- display:var(--tds-field-description-invalid-icon-display, none);
1965
- flex-shrink:0;
1966
- margin-block-start:calc(.5lh - .5em);
1967
- line-height:1.35;
1968
- }
1969
1448
 
1970
- .tds-field-date-segment{
1971
- padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
1972
- text-align:end;
1973
- text-wrap:nowrap;
1974
- caret-color:transparent;
1975
- border-radius:var(--t-border-radius-sm);
1976
- }
1449
+ :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{
1450
+ -webkit-appearance:none;
1451
+ appearance:none;
1452
+ }
1977
1453
 
1978
- .tds-field-date-segment[data-placeholder]{
1979
- color:var(--tds-field-placeholder-color);
1980
- }
1454
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1455
+ inline-size:1em;
1456
+ block-size:2em;
1457
+ }
1981
1458
 
1982
- .tds-field-date-segment[data-focused]{
1983
- color:var(--t-text-color-inverted);
1984
- outline:0;
1985
- background-color:var(--t-fill-color-interaction);
1459
+ @supports (field-sizing: content){
1460
+ .tds-input--auto-width{
1461
+ inline-size:-moz-fit-content;
1462
+ inline-size:fit-content;
1463
+ min-inline-size:min(100%, 122px);
1986
1464
  }
1987
1465
 
1988
- .tds-field-date-segment-separator{
1989
- padding-inline:0;
1990
- color:var(--tds-field-placeholder-color);
1991
- }
1992
-
1993
- .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
1994
- color:var(--tds-field-color);
1466
+ .tds-input--auto-width input{
1467
+ field-sizing:content;
1468
+ inline-size:auto;
1469
+ }
1995
1470
  }
1996
1471
 
1997
- .tds-select{
1998
- --tds-select-border-color:var(--t-form-border-color);
1999
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
2000
- --tds-select-border-color-active:var(--t-form-border-color-hover);
2001
- --tds-select-background-color:var(--t-form-background-color);
2002
- --tds-select-color:var(--t-form-color);
2003
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
2004
- --tds-select-font-size:var(--t-font-size-md);
2005
- --tds-select-min-height:var(--t-container-size-md);
2006
- --tds-select-padding-block:0;
2007
- --tds-select-description-color:var(--t-text-color-secondary);
2008
- --tds-select-description-invalid-icon-display:none;
2009
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
2010
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
2011
- --tds-select-caret-size:1em;
2012
- --tds-select-caret-inline-offset:.75em;
2013
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1472
+ .tds-radio{
1473
+ --tds-radio-font-size:var(--t-font-size-md);
1474
+ --tds-radio-cursor:pointer;
1475
+ --tds-radio-line-height:1.4;
1476
+ --tds-radio-transition-property:border-width;
2014
1477
 
2015
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
2016
- --tds-select-dropdown-border:1px solid var(--t-border-color);
2017
- --tds-select-dropdown-padding:var(--t-spacing-1);
2018
- --tds-select-dropdown-margin-block:5px;
2019
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
2020
- --tds-select-dropdown-scrollbar-width:thin;
2021
- --tds-select-dropdown-border-radius:var(--t-border-radius);
2022
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
2023
- --tds-select-dropdown-scroll-behavior:smooth;
2024
- --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
2025
- --tds-select-dropdown-closed-opacity:0;
2026
- --tds-select-dropdown-open-opacity:1;
2027
- --tds-select-dropdown-closed-translate:0 -8px;
2028
- --tds-select-dropdown-open-translate:0 0;
1478
+ --tds-radio-input-size:var(--t-element-size-md);
1479
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1480
+ --tds-radio-input-border-color:var(--t-form-border-color);
1481
+ --tds-radio-input-border-width:var(--t-form-border-width);
1482
+ --tds-radio-input-background-color:var(--t-form-background-color);
2029
1483
 
2030
- --tds-select-option-gap:var(--t-spacing-1);
2031
- --tds-select-option-padding-block:var(--t-spacing-1);
2032
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
2033
- --tds-select-option-font-size:1rem;
2034
- --tds-select-option-color:var(--t-text-color);
2035
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
2036
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
2037
- --tds-select-option-border-radius:var(--t-border-radius);
1484
+ --tds-radio-label-color:var(--t-form-color);
2038
1485
 
2039
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
2040
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
2041
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
2042
- --tds-select-group-label-font-size:var(--t-font-size-sm);
2043
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
2044
- --tds-select-group-label-letter-spacing:0;
2045
- --tds-select-group-label-color:var(--t-text-color-secondary);
2046
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
2047
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
2048
- --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
1486
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1487
+ --tds-radio-description-line-height:1.35;
1488
+ --tds-radio-description-color:var(--t-text-color-secondary);
2049
1489
 
2050
1490
  position:relative;
2051
- display:flex;
2052
- flex-direction:column;
2053
- gap:var(--t-spacing-half);
1491
+ display:inline-grid;
1492
+ grid-template-columns:auto;
1493
+ grid-auto-columns:1fr;
1494
+ gap:var(--t-spacing-fourth) 0;
1495
+ line-height:var(--tds-radio-line-height);
1496
+ -webkit-user-select:none;
1497
+ -moz-user-select:none;
1498
+ user-select:none;
2054
1499
  }
2055
1500
 
2056
- .tds-select :is(label,.tds-select-label){
2057
- font-size:var(--t-font-size-md);
1501
+ .tds-radio label{
1502
+ grid-area:1 / 2;
1503
+ padding-inline-start:var(--t-spacing-1);
1504
+ font-size:var(--tds-radio-font-size);
2058
1505
  font-weight:var(--t-font-weight-normal);
2059
- color:var(--t-text-color);
2060
- cursor:default;
1506
+ color:var(--tds-radio-label-color);
1507
+ cursor:var(--tds-radio-cursor);
2061
1508
  }
2062
1509
 
2063
- .tds-select :is(select,button){
1510
+ .tds-radio input[type="radio"]{
2064
1511
  position:relative;
2065
- place-items:center;
2066
- inline-size:100%;
2067
- min-block-size:var(--tds-select-min-height);
2068
- padding-block:var(--tds-select-padding-block);
2069
- padding-inline:var(--t-spacing-1);
2070
- padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
2071
- font-family:inherit;
2072
- font-size:var(--tds-select-font-size);
2073
- line-height:1.15;
2074
- color:var(--tds-select-color);
2075
- text-align:left;
1512
+ width:1em;
1513
+ height:1em;
1514
+ margin:calc((1lh - 1em) / 2) 0 0;
1515
+ font-size:var(--tds-radio-font-size);
1516
+ line-height:inherit;
2076
1517
  -webkit-appearance:none;
2077
1518
  -moz-appearance:none;
2078
1519
  appearance:none;
2079
- cursor:var(--tds-select-cursor, default);
2080
- outline:var(--t-focus-ring-width) solid transparent;
2081
- outline-offset:0;
2082
- background-color:var(--tds-select-background-color);
2083
- background-image:var(--tds-select-background-image);
2084
- background-repeat:no-repeat;
2085
- background-position:right var(--tds-select-caret-inline-offset) top 50%;
2086
- background-size:var(--tds-select-caret-size);
2087
- border:var(--t-form-border-width) solid var(--tds-select-border-color);
2088
- border-radius:var(--t-form-border-radius);
1520
+ cursor:var(--tds-radio-cursor);
1521
+ background-color:var(--tds-radio-input-background-color);
1522
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1523
+ border-radius:var(--tds-radio-input-border-radius);
2089
1524
  transition-timing-function:var(--t-ease-in-out);
2090
- transition-duration:var(--t-duration-300);
2091
- transition-property:var(--tds-select-transition-property);
1525
+ transition-duration:var(--t-duration-200);
1526
+ transition-property:var(--tds-radio-transition-property);
2092
1527
  }
2093
1528
 
2094
- :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
2095
- border-color:var(--tds-select-border-color-hover);
1529
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1530
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1531
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2096
1532
  }
2097
1533
 
2098
- :is(.tds-select :is(select,button)):focus{
2099
- outline-color:var(--t-focus-ring-color);
1534
+ :is(.tds-radio input[type="radio"]):focus-visible{
1535
+ outline:var(--t-focus-ring-outline);
2100
1536
  outline-offset:var(--t-focus-ring-offset);
2101
- border-color:var(--tds-select-border-color-active);
2102
1537
  }
2103
1538
 
2104
- :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
2105
- color:var(--tds-select-placeholder-color);
1539
+ :is(.tds-radio input[type="radio"]):disabled{
1540
+ pointer-events:none;
2106
1541
  }
2107
1542
 
2108
- .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
2109
- --tds-select-border-color:var(--t-form-border-color-error);
2110
- --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
2111
- --tds-select-border-color-active:var(--t-form-border-color-error-hover);
2112
- --tds-select-background-color:var(--t-form-background-color-error);
2113
- --tds-select-description-color:var(--t-text-color-status-error);
2114
- --tds-select-description-invalid-icon-display:inline-block;
2115
- }
1543
+ @media (prefers-reduced-motion: reduce){
2116
1544
 
2117
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
2118
- margin-left:.25ch;
2119
- color:var(--t-text-color-status-error);
2120
- content:"*";
1545
+ .tds-radio input[type="radio"]{
1546
+ --tds-radio-transition-property:none;
1547
+ }
2121
1548
  }
2122
1549
 
2123
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
2124
- --tds-select-border-color:var(--t-form-border-color-disabled);
2125
- --tds-select-background-color:var(--t-form-background-color-disabled);
2126
- --tds-select-color:var(--t-form-color-disabled);
2127
- --tds-select-cursor:not-allowed;
1550
+ .tds-radio:has(input:checked){
1551
+ --tds-radio-input-background-color:var(--t-form-background-color);
1552
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1553
+ --tds-radio-input-border-width:4px;
2128
1554
  }
2129
1555
 
2130
- .tds-select:has( > [popover]:popover-open) > button{
2131
- border-color:var(--tds-select-border-color-active);
2132
- }
1556
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1557
+ --tds-radio-input-background-color:var(--t-form-background-color);
1558
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1559
+ }
2133
1560
 
2134
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
2135
- transform:rotate(.5turn);
2136
- }
2137
-
2138
- .tds-select :is(hr,li[role="separator"]){
2139
- margin-block:var(--t-spacing-half);
2140
- color:var(--tds-select-border-color);
2141
- border:0;
2142
- border-top:1px solid;
2143
- }
2144
-
2145
- .tds-select :is(li[role="option"],option:not([hidden])){
2146
- display:block;
2147
- padding-block:var(--tds-select-option-padding-block);
2148
- padding-inline:var(--tds-select-option-padding-inline);
2149
- overflow:hidden;
2150
- text-overflow:ellipsis;
2151
- font-size:var(--tds-select-option-font-size);
2152
- line-height:1;
2153
- color:var(--tds-select-option-color);
2154
- white-space:nowrap;
2155
- cursor:default;
2156
- border-radius:var(--tds-select-option-border-radius);
1561
+ .tds-radio:has(input:user-invalid){
1562
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2157
1563
  }
2158
1564
 
2159
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
2160
- outline:0;
2161
- }
2162
-
2163
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
2164
- background:var(--tds-select-option-background-hover);
2165
- }
2166
-
2167
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
2168
- background:var(--tds-select-option-background-active);
2169
- }
2170
-
2171
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
2172
- color:var(--t-form-color-disabled);
2173
- cursor:not-allowed;
1565
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1566
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1567
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2174
1568
  }
2175
1569
 
2176
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
2177
- background:transparent;
2178
- }
1570
+ .tds-radio:has(input:disabled){
1571
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1572
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2179
1573
 
2180
- .tds-select :is(li[role="presentation"],legend){
2181
- position:sticky;
2182
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
2183
- z-index:1;
2184
- float:inline-start;
2185
- inline-size:100%;
2186
- padding-block:var(--tds-select-group-label-padding-block);
2187
- padding-inline:var(--tds-select-group-label-padding-inline);
2188
- container-type:scroll-state;
2189
- font-size:var(--tds-select-group-label-font-size);
2190
- font-weight:var(--tds-select-group-label-font-weight);
2191
- letter-spacing:var(--tds-select-group-label-letter-spacing);
2192
- background:var(--tds-select-group-label-background);
2193
- text-box:trim-both cap alphabetic;
1574
+ --tds-radio-label-color:var(--t-form-color-disabled);
1575
+ --tds-radio-description-color:var(--t-form-color-disabled);
1576
+ --tds-radio-cursor:not-allowed;
2194
1577
  }
2195
1578
 
2196
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2197
- display:inline-flex;
2198
- gap:var(--t-spacing-half);
2199
- align-items:center;
2200
- color:var(--tds-select-group-label-color);
2201
- transition:var(--tds-select-group-label-transition);
2202
- }
2203
-
2204
- @container scroll-state(stuck){
2205
-
2206
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2207
- color:var(--tds-select-group-label-color-stuck);
1579
+ .tds-radio:has(input:disabled) input:checked{
1580
+ --tds-radio-input-background-color:var(--t-form-background-color);
1581
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2208
1582
  }
2209
1583
 
2210
- @media (forced-colors: active){
1584
+ .tds-radio-description{
1585
+ display:flex;
1586
+ grid-area:2 / 2;
1587
+ gap:var(--t-spacing-half);
1588
+ align-items:flex-start;
1589
+ padding-inline-start:var(--t-spacing-1);
1590
+ margin:0;
1591
+ font-size:var(--tds-radio-description-font-size);
1592
+ line-height:var(--tds-radio-description-line-height);
1593
+ color:var(--tds-radio-description-color);
1594
+ cursor:text;
1595
+ }
2211
1596
 
2212
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2213
- color:var(--tds-select-group-label-color-stuck);
2214
- }
2215
- }
2216
- }
1597
+ .tds-radio--sm{
1598
+ --tds-radio-line-height:1.35;
1599
+ --tds-radio-input-size:var(--t-element-size-sm);
1600
+ --tds-radio-font-size:var(--t-font-size-sm);
1601
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1602
+ --tds-radio-description-line-height:1.3;
1603
+ }
2217
1604
 
2218
- .tds-select.tds-select--lg{
2219
- --tds-select-min-height:var(--t-container-size-lg);
2220
- --tds-select-font-size:var(--t-font-size-lg);
2221
- }
1605
+ .tds-number-stepper{
1606
+ --tds-number-stepper-button-offset:4px;
1607
+ --tds-number-stepper-button-gap:2px;
1608
+ }
2222
1609
 
2223
- @media (prefers-reduced-motion: reduce){
1610
+ .tds-number-stepper--lg{
1611
+ --tds-number-stepper-button-offset:5px;
1612
+ --tds-number-stepper-button-gap:4px;
1613
+ }
2224
1614
 
2225
- .tds-select{
2226
- --tds-select-transition-property:none;
2227
- --tds-select-dropdown-transition:none;
2228
- --tds-select-dropdown-scroll-behavior:auto;
2229
- --tds-select-dropdown-closed-translate:none;
2230
- --tds-select-dropdown-open-translate:none;
2231
- --tds-select-caret-transition:none;
1615
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1616
+ display:none;
2232
1617
  }
2233
- }
2234
1618
 
2235
- .tds-select-description{
1619
+ .tds-number-stepper-input{
2236
1620
  display:flex;
2237
- gap:var(--t-spacing-half);
2238
- align-items:flex-start;
2239
- margin:0;
2240
- font-size:var(--t-font-size-sm);
2241
- line-height:1.35;
2242
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
2243
- cursor:text;
1621
+ flex:1;
1622
+ align-items:center;
1623
+ min-inline-size:0;
1624
+ padding-block:var(--tds-field-padding-block);
1625
+ padding-inline:var(--tds-field-padding-inline);
1626
+ font-family:inherit;
1627
+ font-size:inherit;
1628
+ color:inherit;
1629
+ outline:0;
1630
+ background:transparent;
1631
+ border:0;
2244
1632
  }
2245
1633
 
2246
- .tds-select-description .tds-select-description-invalid-icon{
2247
- display:var(--tds-select-description-invalid-icon-display, none);
2248
- flex-shrink:0;
2249
- margin-block-start:calc(.5lh - .5em);
2250
- line-height:1.35;
1634
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1635
+ margin:0;
1636
+ -webkit-appearance:none;
1637
+ appearance:none;
2251
1638
  }
2252
1639
 
2253
- .tds-select > .tds-select-hidden-select{
2254
- position:absolute;
2255
- inline-size:1px;
2256
- block-size:1px;
1640
+ .tds-number-stepper-button{
1641
+ flex-shrink:0;
1642
+ align-self:center;
1643
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1644
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
2257
1645
  padding:0;
2258
- margin:0;
2259
- pointer-events:none;
2260
- opacity:0;
2261
1646
  }
2262
1647
 
2263
- .tds-select:has(> button){
2264
- anchor-scope:--tds-select-anchor;
2265
- }
1648
+ .tds-number-stepper-button + .tds-number-stepper-button{
1649
+ margin-inline-start:var(--tds-number-stepper-button-gap);
1650
+ }
2266
1651
 
2267
- .tds-select:has( > button) > button{
2268
- display:block;
2269
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
2270
- anchor-name:--tds-select-anchor;
2271
- overflow:hidden;
2272
- text-overflow:ellipsis;
2273
- color:var(--tds-select-placeholder-color);
2274
- white-space:nowrap;
2275
- background-image:none;
2276
- transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
2277
- -webkit-tap-highlight-color:transparent;
1652
+ .tds-number-stepper-button:last-of-type{
1653
+ margin-inline-end:var(--tds-number-stepper-button-offset);
2278
1654
  }
2279
1655
 
2280
- :is(.tds-select:has( > button) > button)::after{
2281
- position:absolute;
2282
- inset-block:0;
2283
- inset-inline-end:var(--tds-select-caret-inline-offset);
2284
- width:var(--tds-select-caret-size);
2285
- height:var(--tds-select-caret-size);
2286
- margin-block:auto;
2287
- line-height:1;
2288
- pointer-events:none;
2289
- content:var(--tds-select-background-image);
2290
- transform:rotate(0);
2291
- transition:var(--tds-select-caret-transition);
2292
- }
1656
+ .tds-time-field-input{
1657
+ --tds-field-date-segment-padding-inline:1px;
1658
+ padding-block:var(--tds-field-padding-block);
1659
+ padding-inline:var(--tds-field-padding-inline);
1660
+ font-variant-numeric:tabular-nums;
1661
+ }
2293
1662
 
2294
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
2295
- color:var(--tds-select-color);
2296
- }
1663
+ .tds-input:has(textarea){
1664
+ --tds-input-padding-block:6px;
1665
+ --tds-input-resizer-size:var(--t-element-size-sm);
1666
+ --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");
1667
+ }
2297
1668
 
2298
- .tds-select:has( > button) [popover]{
2299
- inset:auto;
2300
- inline-size:-moz-max-content;
2301
- inline-size:max-content;
2302
- min-inline-size:anchor-size(width);
2303
- max-inline-size:100vi;
2304
- max-block-size:min(50vh, 20rem);
2305
- padding:var(--tds-select-dropdown-padding);
2306
- margin-block:var(--tds-select-dropdown-margin-block);
2307
- position-area:block-end span-inline-start;
2308
- position-anchor:--tds-select-anchor;
2309
- position-try-fallbacks:flip-block, flip-inline;
2310
- overflow:auto;
2311
- overflow-x:hidden;
2312
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2313
- overscroll-behavior:none;
2314
- -webkit-user-select:none;
2315
- -moz-user-select:none;
2316
- user-select:none;
2317
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
2318
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2319
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2320
- background:var(--tds-select-dropdown-background-color);
2321
- border:var(--tds-select-dropdown-border);
2322
- border-radius:var(--tds-select-dropdown-border-radius);
2323
- box-shadow:var(--tds-select-dropdown-box-shadow);
2324
- opacity:var(--tds-select-dropdown-open-opacity);
2325
- translate:var(--tds-select-dropdown-open-translate);
2326
- transition:var(--tds-select-dropdown-transition);
1669
+ @supports (x: attr(x type(*))){
1670
+
1671
+ .tds-input textarea{
1672
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1673
+ }
2327
1674
  }
2328
1675
 
2329
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
2330
- opacity:var(--tds-select-dropdown-closed-opacity);
2331
- translate:var(--tds-select-dropdown-closed-translate);
1676
+ .tds-input.tds-textarea--resize-vertical textarea{
1677
+ resize:vertical;
2332
1678
  }
2333
1679
 
2334
- :is(.tds-select:has( > button) [popover]) ul{
2335
- padding:0;
2336
- margin:0;
2337
- list-style:none;
1680
+ .tds-input.tds-textarea--resize-none textarea{
1681
+ resize:none;
2338
1682
  }
2339
1683
 
2340
- @starting-style{
2341
- :is(.tds-select:has( > button) [popover]):popover-open{
2342
- opacity:var(--tds-select-dropdown-closed-opacity);
2343
- translate:var(--tds-select-dropdown-closed-translate);
2344
- }
1684
+ .tds-input.tds-textarea--resize-auto textarea{
1685
+ resize:vertical;
2345
1686
  }
2346
1687
 
2347
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
2348
- .tds-select select:has(> button){
2349
- padding-inline-end:0;
2350
- background-image:none;
2351
- }
2352
- @media (hover) and (pointer: fine){
2353
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
2354
- padding-block:0;
2355
- -webkit-appearance:base-select;
2356
- -moz-appearance:base-select;
2357
- appearance:base-select;
1688
+ @supports (field-sizing: content){
1689
+ .tds-input.tds-textarea--resize-auto textarea{
1690
+ field-sizing:content;
1691
+ resize:none;
2358
1692
  }
2359
1693
  }
2360
- :is(.tds-select select:has( > button))::picker-icon{
2361
- flex-shrink:0;
2362
- width:var(--tds-select-caret-size);
2363
- height:var(--tds-select-caret-size);
2364
- margin-inline-end:var(--tds-select-caret-inline-offset);
2365
- line-height:1;
2366
- content:var(--tds-select-background-image);
2367
- transition:var(--tds-select-caret-transition);
1694
+
1695
+ .tds-input textarea{
1696
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1697
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1698
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1699
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1700
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1701
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1702
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1703
+ --tds-input-scrollbar-thumb-border-radius:999px;
1704
+ --tds-input-scrollbar-thumb-border-width:3px;
1705
+ --tds-input-scrollbar-track-margin-block:.125rem;
1706
+ scrollbar-color:initial;
1707
+ transition-timing-function:var(--t-ease-in-out);
1708
+ transition-duration:var(--t-duration-200);
1709
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1710
+ }
1711
+
1712
+ @media (pointer: fine){
1713
+ :is(.tds-input textarea)::-webkit-scrollbar{
1714
+ width:12px;
1715
+ height:12px;
1716
+ cursor:default;
2368
1717
  }
2369
1718
 
2370
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
2371
- opacity:var(--tds-select-dropdown-closed-opacity);
2372
- translate:var(--tds-select-dropdown-closed-translate);
1719
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1720
+ cursor:default;
1721
+ background:var(--tds-input-scrollbar-thumb-color);
1722
+ background-clip:content-box;
1723
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1724
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2373
1725
  }
2374
1726
 
2375
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
2376
- outline-color:var(--t-focus-ring-color);
2377
- outline-offset:var(--t-focus-ring-offset);
2378
- border-color:var(--tds-select-border-color-active);
1727
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1728
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2379
1729
  }
2380
1730
 
2381
- :is(.tds-select select:has( > button)):open::picker-icon{
2382
- opacity:1;
2383
- transform:rotate(.5turn);
1731
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1732
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2384
1733
  }
2385
1734
 
2386
- :is(.tds-select select:has( > button)) selectedcontent{
2387
- overflow:hidden;
2388
- text-overflow:ellipsis;
2389
- line-height:calc(var(--tds-select-min-height) - 2px);
2390
- white-space:nowrap;
1735
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1736
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2391
1737
  }
2392
1738
 
2393
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
2394
- color:var(--tds-select-placeholder-color);
1739
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1740
+ background:var(--tds-input-scrollbar-surface-color);
2395
1741
  }
2396
1742
 
2397
- :is(.tds-select select:has( > button))::picker(select){
2398
- inset:auto;
2399
- inline-size:-moz-max-content;
2400
- inline-size:max-content;
2401
- min-inline-size:anchor-size(width);
2402
- max-inline-size:100vi;
2403
- padding:var(--tds-select-dropdown-padding);
2404
- margin-block:var(--tds-select-dropdown-margin-block);
2405
- position-area:block-end span-inline-start;
2406
- position-try-fallbacks:flip-block, flip-inline;
2407
- overflow:auto;
2408
- overflow-x:hidden;
2409
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2410
- overscroll-behavior:none;
2411
- -webkit-user-select:none;
2412
- -moz-user-select:none;
2413
- user-select:none;
2414
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2415
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2416
- background:var(--tds-select-dropdown-background-color);
2417
- border:var(--tds-select-dropdown-border);
2418
- border-radius:var(--tds-select-dropdown-border-radius);
2419
- box-shadow:var(--tds-select-dropdown-box-shadow);
2420
- opacity:var(--tds-select-dropdown-open-opacity);
2421
- translate:var(--tds-select-dropdown-open-translate);
2422
- transition:var(--tds-select-dropdown-transition);
1743
+ :is(.tds-input textarea)::-webkit-resizer{
1744
+ background:var(--tds-input-resizer-icon) no-repeat;
1745
+ background-position:right bottom;
1746
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2423
1747
  }
2424
1748
 
2425
- :is(.tds-select select:has( > button)) option::checkmark{
2426
- display:none;
1749
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1750
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1751
+ cursor:default;
2427
1752
  }
2428
1753
 
2429
- @starting-style{
2430
- :is(.tds-select select:has( > button))::picker(select):popover-open{
2431
- opacity:var(--tds-select-dropdown-closed-opacity);
2432
- translate:var(--tds-select-dropdown-closed-translate);
1754
+ @supports (-moz-appearance: none){
1755
+ :is(.tds-input textarea){
1756
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1757
+ scrollbar-width:thin;
1758
+ }
1759
+
1760
+ @media (hover){
1761
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1762
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1763
+ }
2433
1764
  }
2434
1765
  }
1766
+ }
1767
+
1768
+ .tds-radio-group{
1769
+ --tds-radio-group-font-size:var(--t-font-size-md);
1770
+ --tds-radio-group-line-height:1.4;
1771
+ --tds-radio-group-gap:var(--t-spacing-1);
1772
+
1773
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1774
+ --tds-radio-group-description-line-height:1.35;
1775
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1776
+ --tds-radio-group-description-invalid-icon-display:none;
1777
+ display:flex;
1778
+ flex-direction:column;
1779
+ gap:0;
1780
+ padding:0;
1781
+ margin:0;
1782
+
1783
+ font-size:var(--tds-radio-group-font-size);
1784
+ line-height:var(--tds-radio-group-line-height);
1785
+ border:0;
2435
1786
  }
2436
1787
 
2437
- @layer t-critical{
2438
- tds-page-header:not(.hydrated){
2439
- display:none;
1788
+ .tds-radio-group legend{
1789
+ float:left;
1790
+ padding:0;
1791
+ margin:0;
1792
+ }
1793
+
1794
+ .tds-radio-group[aria-invalid="true"]{
1795
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1796
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2440
1797
  }
1798
+
1799
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1800
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1801
+ }
1802
+
1803
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1804
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1805
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1806
+ }
1807
+
1808
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1809
+ --tds-radio-input-background-color:var(--t-form-background-color);
1810
+ }
1811
+
1812
+ .tds-radio-group:has(input:required) legend::after{
1813
+ margin-left:.25ch;
1814
+ color:var(--t-text-color-status-error);
1815
+ content:"*";
1816
+ }
1817
+
1818
+ .tds-radio-group-fields{
1819
+ display:flex;
1820
+ flex-direction:column;
1821
+ gap:var(--tds-radio-group-gap);
1822
+ align-items:flex-start;
1823
+ margin-top:var(--t-spacing-1);
2441
1824
  }
2442
1825
 
2443
- @layer t-component{
2444
- .tds-page-header{
2445
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2446
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2447
- --tds-page-header-color:var(--t-text-color);
2448
- --tds-page-header-bottom-border-color:transparent;
2449
- --tds-page-header-headline-color:var(--t-text-color-headline);
2450
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2451
- --tds-page-header-padding-x:var(--t-spacing-2);
2452
- --tds-page-header-padding-y:var(--t-spacing-2);
2453
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2454
- --tds-page-header-nav-gap:var(--t-spacing-1);
2455
- --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%);
2456
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2457
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2458
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2459
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2460
- --tds-page-header-nav-item-border-width:1px;
1826
+ .tds-radio-group-description{
1827
+ display:flex;
1828
+ gap:var(--t-spacing-half);
1829
+ align-items:flex-start;
1830
+ margin:var(--t-spacing-fourth) 0 0;
1831
+ font-size:var(--tds-radio-group-description-font-size);
1832
+ line-height:var(--tds-radio-group-description-line-height);
1833
+ color:var(--tds-radio-group-description-color);
1834
+ cursor:text;
1835
+ }
2461
1836
 
2462
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2463
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1837
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1838
+ display:var(--tds-radio-group-description-invalid-icon-display);
1839
+ flex-shrink:0;
1840
+ margin-top:calc(.5lh - .5em);
1841
+ line-height:var(--tds-radio-group-description-line-height);
1842
+ }
2464
1843
 
2465
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
2466
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2467
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1844
+ .tds-radio-group--sm{
1845
+ --tds-radio-group-line-height:1.35;
1846
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1847
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1848
+ --tds-radio-group-description-line-height:1.3;
1849
+ }
2468
1850
 
2469
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2470
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1851
+ .tds-input{
1852
+ --tds-input-border-color:var(--t-form-border-color);
1853
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
1854
+ --tds-input-background-color:var(--t-form-background-color);
1855
+ --tds-input-color:var(--t-form-color);
1856
+ --tds-input-font-size:var(--t-font-size-md);
1857
+ --tds-input-description-color:var(--t-text-color-secondary);
1858
+ --tds-input-description-invalid-icon-display:none;
1859
+ --tds-input-min-height:var(--t-container-size-md);
1860
+ --tds-input-padding-inline:var(--t-spacing-1);
2471
1861
 
2472
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2473
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2474
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1862
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2475
1863
 
2476
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
2477
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2478
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2479
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2480
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1864
+ display:flex;
1865
+ flex-direction:column;
1866
+ gap:var(--t-spacing-half);
1867
+ }
1868
+
1869
+ .tds-input label{
1870
+ font-size:var(--t-font-size-md);
1871
+ font-weight:var(--t-font-weight-normal);
1872
+ color:var(--t-text-color);
1873
+ }
1874
+
1875
+ .tds-input :is(input,textarea){
1876
+ inline-size:100%;
1877
+ block-size:auto;
1878
+ min-block-size:var(--tds-input-min-height);
1879
+ padding-block:var(--tds-input-padding-block);
1880
+ padding-inline:var(--tds-input-padding-inline);
1881
+ font-family:inherit;
1882
+ font-size:var(--tds-input-font-size);
1883
+ color:var(--tds-input-color);
1884
+ -webkit-appearance:none;
1885
+ -moz-appearance:none;
1886
+ appearance:none;
1887
+ outline:var(--t-focus-ring-width) solid transparent;
1888
+ outline-offset:0;
1889
+ background-color:var(--tds-input-background-color);
1890
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
1891
+ border-radius:var(--t-form-border-radius);
1892
+ transition-timing-function:var(--t-ease-in-out);
1893
+ transition-duration:var(--t-duration-200);
1894
+ transition-property:var(--tds-input-transition-property);
1895
+ }
1896
+
1897
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
1898
+ border-color:var(--tds-input-border-color-hover);
1899
+ }
1900
+
1901
+ :is(.tds-input :is(input,textarea)):focus{
1902
+ outline-color:transparent;
1903
+ }
1904
+
1905
+ :is(.tds-input :is(input,textarea)):focus-visible{
1906
+ outline-color:var(--t-focus-ring-color);
1907
+ outline-offset:var(--t-focus-ring-offset);
1908
+ border-color:var(--t-form-border-color-focus);
1909
+ }
1910
+
1911
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
1912
+ color:var(--t-form-placeholder-color);
1913
+ -moz-user-select:none;
1914
+ user-select:none;
1915
+ }
1916
+
1917
+ :is(.tds-input :is(input,textarea))::placeholder{
1918
+ color:var(--t-form-placeholder-color);
1919
+ -webkit-user-select:none;
1920
+ -moz-user-select:none;
1921
+ user-select:none;
1922
+ }
1923
+
1924
+ @media (prefers-reduced-motion: reduce){
1925
+
1926
+ .tds-input :is(input,textarea){
1927
+ --tds-input-transition-property:none;
1928
+ }
1929
+ }
1930
+
1931
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
1932
+ --tds-input-background-color:var(--t-form-background-color-error);
1933
+ --tds-input-border-color:var(--t-form-border-color-error);
1934
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1935
+ --tds-input-description-color:var(--t-text-color-status-error);
1936
+ --tds-input-description-invalid-icon-display:inline-block;
1937
+ }
1938
+
1939
+ .tds-input:has(:is(input,textarea):required) label::after{
1940
+ margin-left:.25ch;
1941
+ color:var(--t-text-color-status-error);
1942
+ content:"*";
1943
+ }
1944
+
1945
+ .tds-input:where(:has(:is(input,textarea):disabled)){
1946
+ --tds-input-border-color:var(--t-form-border-color-disabled);
1947
+ --tds-input-background-color:var(--t-form-background-color-disabled);
1948
+ --tds-input-color:var(--t-form-color-disabled);
1949
+ }
1950
+
1951
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
1952
+ cursor:not-allowed;
1953
+ }
1954
+
1955
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
1956
+ --tds-input-border-color:var(--t-form-border-color-readonly);
1957
+ --tds-input-background-color:var(--t-form-background-color-readonly);
1958
+ }
1959
+
1960
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
1961
+ border-color:var(--tds-input-border-color-hover);
1962
+ }
1963
+
1964
+ .tds-input.tds-input--lg{
1965
+ --tds-input-min-height:var(--t-container-size-lg);
1966
+ --tds-input-font-size:var(--t-font-size-lg);
1967
+ }
1968
+
1969
+ .tds-input-description{
1970
+ display:flex;
1971
+ gap:var(--t-spacing-half);
1972
+ align-items:flex-start;
1973
+ margin:0;
1974
+ font-size:var(--t-font-size-sm);
1975
+ line-height:1.35;
1976
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
1977
+ cursor:text;
1978
+ }
1979
+
1980
+ .tds-input-description .tds-input-description-invalid-icon{
1981
+ display:var(--tds-input-description-invalid-icon-display, none);
1982
+ flex-shrink:0;
1983
+ margin-block-start:calc(.5lh - .5em);
1984
+ line-height:1.35;
1985
+ }
1986
+
1987
+ .tds-field{
1988
+ --tds-field-border-color:var(--t-form-border-color);
1989
+ --tds-field-border-color-hover:var(--t-form-border-color-hover);
1990
+ --tds-field-border-color-active:var(--t-form-border-color-focus);
1991
+ --tds-field-background-color:var(--t-form-background-color);
1992
+ --tds-field-color:var(--t-form-color);
1993
+ --tds-field-placeholder-color:var(--t-form-placeholder-color);
1994
+ --tds-field-font-size:var(--t-font-size-md);
1995
+ --tds-field-min-height:var(--t-container-size-md);
1996
+ --tds-field-padding-block:6px;
1997
+ --tds-field-padding-inline:var(--t-spacing-1);
1998
+ --tds-field-description-color:var(--t-text-color-secondary);
1999
+ --tds-field-description-invalid-icon-display:none;
2000
+
2001
+ position:relative;
2002
+ display:flex;
2003
+ flex-direction:column;
2004
+ gap:var(--t-spacing-half);
2005
+ }
2006
+
2007
+ .tds-field[data-required] .tds-field-label::after{
2008
+ margin-left:.25ch;
2009
+ color:var(--t-text-color-status-error);
2010
+ content:"*";
2011
+ }
2012
+
2013
+ .tds-field[data-invalid]{
2014
+ --tds-field-border-color:var(--t-form-border-color-error);
2015
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2016
+ --tds-field-border-color-active:var(--t-form-border-color-error-hover);
2017
+ --tds-field-background-color:var(--t-form-background-color-error);
2018
+ --tds-field-description-color:var(--t-text-color-status-error);
2019
+ --tds-field-description-invalid-icon-display:inline-block;
2020
+ }
2021
+
2022
+ .tds-field[data-disabled]{
2023
+ --tds-field-border-color:var(--t-form-border-color-disabled);
2024
+ --tds-field-background-color:var(--t-form-background-color-disabled);
2025
+ --tds-field-color:var(--t-form-color-disabled);
2026
+ --tds-field-placeholder-color:var(--t-form-color-disabled);
2027
+ }
2028
+
2029
+ .tds-field[data-disabled] .tds-field-control{
2030
+ cursor:not-allowed;
2031
+ }
2032
+
2033
+ .tds-field--lg{
2034
+ --tds-field-min-height:var(--t-container-size-lg);
2035
+ --tds-field-font-size:var(--t-font-size-lg);
2036
+ }
2037
+
2038
+ .tds-field-label{
2039
+ font-size:var(--t-font-size-md);
2040
+ font-weight:var(--t-font-weight-normal);
2041
+ color:var(--t-text-color);
2042
+ cursor:default;
2043
+ }
2044
+
2045
+ .tds-field-control{
2046
+ display:flex;
2047
+ align-items:center;
2048
+ inline-size:100%;
2049
+ min-block-size:var(--tds-field-min-height);
2050
+ font-family:inherit;
2051
+ font-size:var(--tds-field-font-size);
2052
+ line-height:1;
2053
+ color:var(--tds-field-color);
2054
+ -webkit-appearance:none;
2055
+ -moz-appearance:none;
2056
+ appearance:none;
2057
+ cursor:text;
2058
+ outline:var(--t-focus-ring-width) solid transparent;
2059
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2060
+ outline-offset:0;
2061
+ background-color:var(--tds-field-background-color);
2062
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
2063
+ border-radius:var(--t-form-border-radius);
2064
+ transition-timing-function:var(--t-ease-in-out);
2065
+ transition-duration:var(--t-duration-200);
2066
+ transition-property:background-color, border-color, outline-color, outline-offset;
2067
+ }
2068
+
2069
+ .tds-field-control[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
2070
+ border-color:var(--tds-field-border-color-hover);
2071
+ }
2072
+
2073
+ .tds-field-control[data-focus-within]{
2074
+ outline-color:var(--t-focus-ring-color);
2075
+ outline-offset:var(--t-focus-ring-offset);
2076
+ border-color:var(--tds-field-border-color-active);
2077
+ }
2078
+
2079
+ .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
2080
+ --tds-field-border-color:var(--t-form-border-color-readonly);
2081
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2082
+ --tds-field-background-color:var(--t-form-background-color-readonly);
2083
+ color:var(--t-form-color-readonly);
2084
+ }
2085
+
2086
+ [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
2087
+ border-color:var(--t-form-border-color-hover);
2088
+ }
2089
+
2090
+ .tds-field-description{
2091
+ display:flex;
2092
+ gap:var(--t-spacing-half);
2093
+ align-items:flex-start;
2094
+ margin:0;
2095
+ font-size:var(--t-font-size-sm);
2096
+ line-height:1.35;
2097
+ color:var(--tds-field-description-color, var(--t-text-color-secondary));
2098
+ cursor:text;
2099
+ }
2100
+
2101
+ .tds-field-description .tds-field-description-invalid-icon{
2102
+ display:var(--tds-field-description-invalid-icon-display, none);
2103
+ flex-shrink:0;
2104
+ margin-block-start:calc(.5lh - .5em);
2105
+ line-height:1.35;
2106
+ }
2107
+
2108
+ .tds-field-date-segment{
2109
+ padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
2110
+ text-align:end;
2111
+ text-wrap:nowrap;
2112
+ caret-color:transparent;
2113
+ border-radius:var(--t-border-radius-sm);
2114
+ }
2115
+
2116
+ .tds-field-date-segment[data-placeholder]{
2117
+ color:var(--tds-field-placeholder-color);
2118
+ }
2119
+
2120
+ .tds-field-date-segment[data-focused]{
2121
+ color:var(--t-text-color-inverted);
2122
+ outline:0;
2123
+ background-color:var(--t-fill-color-interaction);
2124
+ }
2125
+
2126
+ .tds-field-date-segment-separator{
2127
+ padding-inline:0;
2128
+ color:var(--tds-field-placeholder-color);
2129
+ }
2130
+
2131
+ .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
2132
+ color:var(--tds-field-color);
2133
+ }
2134
+
2135
+ .tds-toggle-switch{
2136
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2137
+ --tds-toggle-switch-cursor:pointer;
2138
+ --tds-toggle-switch-display:inline-grid;
2139
+ --tds-toggle-switch-line-height:1.4;
2140
+
2141
+ --tds-toggle-switch-label-color:var(--t-form-color);
2142
+
2143
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2144
+ --tds-toggle-switch-track-outline:none;
2145
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2146
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2147
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2148
+
2149
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2150
+ --tds-toggle-switch-thumb-transform:translateX(0);
2151
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2152
+
2153
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2154
+ --tds-toggle-switch-description-line-height:1.35;
2155
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2156
+ position:relative;
2157
+
2158
+ display:var(--tds-toggle-switch-display);
2159
+ grid-template-columns:auto;
2160
+ grid-auto-columns:1fr;
2161
+ gap:var(--t-spacing-fourth) 0;
2162
+ -webkit-user-select:none;
2163
+ -moz-user-select:none;
2164
+ user-select:none;
2165
+ }
2166
+
2167
+ .tds-toggle-switch input[type="checkbox"]{
2168
+ position:absolute;
2169
+ width:var(--tds-toggle-switch-track-width);
2170
+ height:var(--tds-toggle-switch-track-height);
2171
+ margin:0;
2172
+ -webkit-appearance:none;
2173
+ -moz-appearance:none;
2174
+ appearance:none;
2175
+ cursor:var(--tds-toggle-switch-cursor);
2176
+ outline:var(--tds-toggle-switch-track-outline);
2177
+ outline-offset:var(--t-focus-ring-offset);
2178
+ background-color:transparent;
2179
+ border:0;
2180
+ border-radius:var(--t-border-radius-round);
2181
+ }
2182
+
2183
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2184
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2185
+ }
2186
+
2187
+ .tds-toggle-switch label{
2188
+ display:inline-flex;
2189
+ grid-area:1 / 2;
2190
+ padding-inline-start:var(--t-spacing-1);
2191
+ margin-top:-.09375em;
2192
+ font-size:var(--tds-toggle-switch-font-size);
2193
+ font-weight:var(--t-font-weight-normal);
2194
+ line-height:var(--tds-toggle-switch-line-height);
2195
+ color:var(--tds-toggle-switch-label-color);
2196
+ cursor:var(--tds-toggle-switch-cursor);
2197
+ }
2198
+
2199
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2200
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2201
+ }
2202
+
2203
+ .tds-toggle-switch:has(input:checked){
2204
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2205
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2206
+ }
2207
+
2208
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2209
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2210
+ }
2211
+
2212
+ .tds-toggle-switch:has(input:disabled){
2213
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2214
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2215
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2216
+ --tds-toggle-switch-cursor:not-allowed;
2217
+ }
2218
+
2219
+ .tds-toggle-switch-track{
2220
+ position:relative;
2221
+ flex-shrink:0;
2222
+ width:var(--tds-toggle-switch-track-width);
2223
+ height:var(--tds-toggle-switch-track-height);
2224
+ background-color:var(--tds-toggle-switch-track-background-color);
2225
+ border-radius:var(--t-border-radius-round);
2226
+ transition:var(--tds-toggle-switch-track-transition);
2227
+ }
2228
+
2229
+ .tds-toggle-switch-track::before{
2230
+ position:absolute;
2231
+ top:var(--t-spacing-fourth);
2232
+ left:var(--t-spacing-fourth);
2233
+ width:var(--tds-toggle-switch-thumb-size);
2234
+ height:var(--tds-toggle-switch-thumb-size);
2235
+ content:"";
2236
+ background-color:#fff;
2237
+ border-radius:var(--t-border-radius-round);
2238
+ transform:var(--tds-toggle-switch-thumb-transform);
2239
+ transition:var(--tds-toggle-switch-thumb-transition);
2240
+ }
2241
+
2242
+ @media (prefers-reduced-motion: reduce){
2243
+
2244
+ .tds-toggle-switch-track{
2245
+ --tds-toggle-switch-track-transition:none;
2246
+ --tds-toggle-switch-thumb-transition:none;
2247
+ }
2248
+ }
2249
+
2250
+ .tds-toggle-switch-description{
2251
+ display:flex;
2252
+ grid-area:2 / 2;
2253
+ align-items:flex-start;
2254
+ padding-inline-start:var(--t-spacing-1);
2255
+ margin:0;
2256
+ font-size:var(--tds-toggle-switch-description-font-size);
2257
+ line-height:var(--tds-toggle-switch-description-line-height);
2258
+ color:var(--tds-toggle-switch-description-color);
2259
+ cursor:text;
2260
+ }
2261
+
2262
+ .tds-toggle-switch--sm{
2263
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2264
+ --tds-toggle-switch-line-height:1.35;
2265
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2266
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2267
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2268
+ --tds-toggle-switch-description-line-height:1.3;
2269
+ }
2270
+
2271
+ .tds-toggle-switch--hide-label{
2272
+ --tds-toggle-switch-display:inline-flex;
2273
+ }
2274
+
2275
+ .tds-select{
2276
+ --tds-select-border-color:var(--t-form-border-color);
2277
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
2278
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
2279
+ --tds-select-background-color:var(--t-form-background-color);
2280
+ --tds-select-color:var(--t-form-color);
2281
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
2282
+ --tds-select-font-size:var(--t-font-size-md);
2283
+ --tds-select-min-height:var(--t-container-size-md);
2284
+ --tds-select-padding-block:0;
2285
+ --tds-select-description-color:var(--t-text-color-secondary);
2286
+ --tds-select-description-invalid-icon-display:none;
2287
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
2288
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
2289
+ --tds-select-caret-size:1em;
2290
+ --tds-select-caret-inline-offset:.75em;
2291
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
2292
+
2293
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
2294
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
2295
+ --tds-select-dropdown-padding:var(--t-spacing-1);
2296
+ --tds-select-dropdown-margin-block:5px;
2297
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
2298
+ --tds-select-dropdown-scrollbar-width:thin;
2299
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
2300
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
2301
+ --tds-select-dropdown-scroll-behavior:smooth;
2302
+ --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
2303
+ --tds-select-dropdown-closed-opacity:0;
2304
+ --tds-select-dropdown-open-opacity:1;
2305
+ --tds-select-dropdown-closed-translate:0 -8px;
2306
+ --tds-select-dropdown-open-translate:0 0;
2307
+
2308
+ --tds-select-option-gap:var(--t-spacing-1);
2309
+ --tds-select-option-padding-block:var(--t-spacing-1);
2310
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
2311
+ --tds-select-option-font-size:1rem;
2312
+ --tds-select-option-color:var(--t-text-color);
2313
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
2314
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
2315
+ --tds-select-option-border-radius:var(--t-border-radius);
2316
+
2317
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
2318
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
2319
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
2320
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
2321
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
2322
+ --tds-select-group-label-letter-spacing:0;
2323
+ --tds-select-group-label-color:var(--t-text-color-secondary);
2324
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
2325
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
2326
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
2327
+
2328
+ position:relative;
2329
+ display:flex;
2330
+ flex-direction:column;
2331
+ gap:var(--t-spacing-half);
2332
+ }
2333
+
2334
+ .tds-select :is(label,.tds-select-label){
2335
+ font-size:var(--t-font-size-md);
2336
+ font-weight:var(--t-font-weight-normal);
2337
+ color:var(--t-text-color);
2338
+ cursor:default;
2481
2339
  }
2482
2340
 
2483
- .tds-page-header--profile{
2484
- --tds-page-header-padding-y:20px;
2341
+ .tds-select :is(select,button){
2342
+ position:relative;
2343
+ place-items:center;
2344
+ inline-size:100%;
2345
+ min-block-size:var(--tds-select-min-height);
2346
+ padding-block:var(--tds-select-padding-block);
2347
+ padding-inline:var(--t-spacing-1);
2348
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
2349
+ font-family:inherit;
2350
+ font-size:var(--tds-select-font-size);
2351
+ line-height:1.15;
2352
+ color:var(--tds-select-color);
2353
+ text-align:left;
2354
+ -webkit-appearance:none;
2355
+ -moz-appearance:none;
2356
+ appearance:none;
2357
+ cursor:var(--tds-select-cursor, default);
2358
+ outline:var(--t-focus-ring-width) solid transparent;
2359
+ outline-offset:0;
2360
+ background-color:var(--tds-select-background-color);
2361
+ background-image:var(--tds-select-background-image);
2362
+ background-repeat:no-repeat;
2363
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
2364
+ background-size:var(--tds-select-caret-size);
2365
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
2366
+ border-radius:var(--t-form-border-radius);
2367
+ transition-timing-function:var(--t-ease-in-out);
2368
+ transition-duration:var(--t-duration-300);
2369
+ transition-property:var(--tds-select-transition-property);
2485
2370
  }
2486
2371
 
2487
- @supports (color: light-dark(#fff, #000)){
2488
- .tds-page-header{
2489
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2490
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2372
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
2373
+ border-color:var(--tds-select-border-color-hover);
2491
2374
  }
2492
- }
2493
2375
 
2494
- @media (min-width: 600px){
2495
- .tds-page-header{
2496
- --tds-page-header-background-color:var(--t-surface-color-canvas);
2497
- --tds-page-header-color:var(--t-text-color-secondary);
2498
- --tds-page-header-bottom-border-color:var(--t-border-color);
2499
- --tds-page-header-padding-x:var(--t-spacing-3);
2500
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2501
- --tds-page-header-nav-gap:var(--t-spacing-half);
2502
- --tds-page-header-nav-background:transparent;
2503
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2504
- --tds-page-header-nav-item-border-width:1px;
2505
- --tds-page-header-nav-item-color:var(--t-text-color);
2506
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2507
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2508
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2509
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2510
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2511
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2376
+ :is(.tds-select :is(select,button)):focus{
2377
+ outline-color:var(--t-focus-ring-color);
2378
+ outline-offset:var(--t-focus-ring-offset);
2379
+ border-color:var(--tds-select-border-color-active);
2380
+ }
2381
+
2382
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
2383
+ color:var(--tds-select-placeholder-color);
2512
2384
  }
2385
+
2386
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
2387
+ --tds-select-border-color:var(--t-form-border-color-error);
2388
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
2389
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
2390
+ --tds-select-background-color:var(--t-form-background-color-error);
2391
+ --tds-select-description-color:var(--t-text-color-status-error);
2392
+ --tds-select-description-invalid-icon-display:inline-block;
2513
2393
  }
2514
- }
2515
2394
 
2516
- .tds-page-header{
2517
- display:flex;
2518
- flex-direction:column;
2519
- padding-top:var(--tds-page-header-padding-y);
2520
- color:var(--tds-page-header-color);
2521
- background:var(--tds-page-header-background-color);
2522
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2523
- }
2395
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
2396
+ margin-left:.25ch;
2397
+ color:var(--t-text-color-status-error);
2398
+ content:"*";
2399
+ }
2524
2400
 
2525
- .tds-page-header:not(.has-nav){
2526
- padding-bottom:var(--tds-page-header-padding-y);
2401
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
2402
+ --tds-select-border-color:var(--t-form-border-color-disabled);
2403
+ --tds-select-background-color:var(--t-form-background-color-disabled);
2404
+ --tds-select-color:var(--t-form-color-disabled);
2405
+ --tds-select-cursor:not-allowed;
2527
2406
  }
2528
2407
 
2529
- .tds-page-header.inactive{
2530
- background:var(--tds-page-header-background-color-inactive);
2408
+ .tds-select:has( > [popover]:popover-open) > button{
2409
+ border-color:var(--tds-select-border-color-active);
2531
2410
  }
2532
2411
 
2533
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2534
- width:100%;
2412
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
2413
+ transform:rotate(.5turn);
2414
+ }
2415
+
2416
+ .tds-select :is(hr,li[role="separator"]){
2417
+ margin-block:var(--t-spacing-half);
2418
+ color:var(--tds-select-border-color);
2419
+ border:0;
2420
+ border-top:1px solid;
2535
2421
  }
2536
2422
 
2537
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2538
- display:flex;
2539
- flex-flow:row wrap;
2540
- gap:var(--t-spacing-half) var(--t-spacing-1);
2541
- align-items:flex-start;
2542
- justify-content:flex-start;
2543
- min-width:0;
2423
+ .tds-select :is(li[role="option"],option:not([hidden])){
2424
+ display:block;
2425
+ padding-block:var(--tds-select-option-padding-block);
2426
+ padding-inline:var(--tds-select-option-padding-inline);
2427
+ overflow:hidden;
2428
+ text-overflow:ellipsis;
2429
+ font-size:var(--tds-select-option-font-size);
2430
+ line-height:1;
2431
+ color:var(--tds-select-option-color);
2432
+ white-space:nowrap;
2433
+ cursor:default;
2434
+ border-radius:var(--tds-select-option-border-radius);
2544
2435
  }
2545
2436
 
2546
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
2547
- display:flex;
2548
- gap:var(--tds-page-header-nav-gap);
2549
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2550
- margin:0 0 -1px;
2551
- overflow:auto;
2552
- list-style:none;
2553
- background:var(--tds-page-header-nav-background);
2437
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
2438
+ outline:0;
2554
2439
  }
2555
2440
 
2556
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2557
- position:relative;
2558
- display:inline-flex;
2559
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2560
- font-size:var(--t-font-size-sm);
2561
- line-height:22px;
2562
- color:var(--tds-page-header-nav-item-color);
2563
- white-space:nowrap;
2564
- text-decoration:none;
2565
- -webkit-appearance:none;
2566
- -moz-appearance:none;
2567
- appearance:none;
2568
- cursor:pointer;
2569
- outline-offset:-2px;
2570
- background-color:var(--tds-page-header-nav-item-background-color);
2571
- background-clip:padding-box;
2572
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2573
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2574
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2441
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
2442
+ background:var(--tds-select-option-background-hover);
2575
2443
  }
2576
2444
 
2577
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2578
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2579
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2580
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2581
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2582
- }
2583
-
2584
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2585
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2586
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2587
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2588
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2589
- }
2445
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
2446
+ background:var(--tds-select-option-background-active);
2447
+ }
2590
2448
 
2591
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2592
- background-color:var(--tds-page-header-nav-item-background-color-active);
2593
- border-color:var(--tds-page-header-nav-item-border-color-active);
2594
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2595
- }
2449
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
2450
+ color:var(--t-form-color-disabled);
2451
+ cursor:not-allowed;
2452
+ }
2596
2453
 
2597
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2598
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2599
- color:var(--tds-page-header-nav-item-color-disabled);
2600
- cursor:not-allowed;
2601
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
2602
- opacity:1;
2603
- }
2454
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
2455
+ background:transparent;
2456
+ }
2604
2457
 
2605
- @media (min-width: 600px){
2606
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2607
- position:absolute;
2608
- inset:auto -1px -1px;
2609
- height:1px;
2610
- pointer-events:none;
2611
- content:"";
2612
- background-color:var(--tds-page-header-bottom-border-color);
2613
- }
2614
- }
2458
+ .tds-select :is(li[role="presentation"],legend){
2459
+ position:sticky;
2460
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
2461
+ z-index:1;
2462
+ float:inline-start;
2463
+ inline-size:100%;
2464
+ padding-block:var(--tds-select-group-label-padding-block);
2465
+ padding-inline:var(--tds-select-group-label-padding-inline);
2466
+ container-type:scroll-state;
2467
+ font-size:var(--tds-select-group-label-font-size);
2468
+ font-weight:var(--tds-select-group-label-font-weight);
2469
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
2470
+ background:var(--tds-select-group-label-background);
2471
+ text-box:trim-both cap alphabetic;
2472
+ }
2615
2473
 
2616
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2617
- position:relative;
2474
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
2475
+ display:inline-flex;
2476
+ gap:var(--t-spacing-half);
2477
+ align-items:center;
2478
+ color:var(--tds-select-group-label-color);
2479
+ transition:var(--tds-select-group-label-transition);
2618
2480
  }
2619
2481
 
2620
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2621
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2622
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2623
- }
2482
+ @container scroll-state(stuck){
2624
2483
 
2625
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2626
- position:absolute;
2627
- top:-5px;
2628
- right:-2px;
2629
- width:10px;
2630
- height:10px;
2631
- content:"";
2632
- background:var(--tds-page-header-nav-item-indicator-color);
2633
- border-radius:50%;
2634
- }
2484
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
2485
+ color:var(--tds-select-group-label-color-stuck);
2486
+ }
2635
2487
 
2636
- @media (prefers-reduced-motion: no-preference){
2637
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2638
- animation:indicator-pulse 1.25s ease infinite;
2488
+ @media (forced-colors: active){
2489
+
2490
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
2491
+ color:var(--tds-select-group-label-color-stuck);
2492
+ }
2639
2493
  }
2640
2494
  }
2641
2495
 
2642
- .tds-page-header__title-bar{
2496
+ .tds-select.tds-select--lg{
2497
+ --tds-select-min-height:var(--t-container-size-lg);
2498
+ --tds-select-font-size:var(--t-font-size-lg);
2499
+ }
2500
+
2501
+ @media (prefers-reduced-motion: reduce){
2502
+
2503
+ .tds-select{
2504
+ --tds-select-transition-property:none;
2505
+ --tds-select-dropdown-transition:none;
2506
+ --tds-select-dropdown-scroll-behavior:auto;
2507
+ --tds-select-dropdown-closed-translate:none;
2508
+ --tds-select-dropdown-open-translate:none;
2509
+ --tds-select-caret-transition:none;
2510
+ }
2511
+ }
2512
+
2513
+ .tds-select-description{
2643
2514
  display:flex;
2644
- flex-direction:column;
2645
- gap:var(--t-spacing-2) var(--t-spacing-1);
2515
+ gap:var(--t-spacing-half);
2646
2516
  align-items:flex-start;
2647
- justify-content:space-between;
2648
- padding:0 var(--tds-page-header-padding-x);
2517
+ margin:0;
2518
+ font-size:var(--t-font-size-sm);
2519
+ line-height:1.35;
2520
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
2521
+ cursor:text;
2649
2522
  }
2650
2523
 
2651
- .tds-page-header--profile > .tds-page-header__title-bar{
2652
- align-items:center;
2524
+ .tds-select-description .tds-select-description-invalid-icon{
2525
+ display:var(--tds-select-description-invalid-icon-display, none);
2526
+ flex-shrink:0;
2527
+ margin-block-start:calc(.5lh - .5em);
2528
+ line-height:1.35;
2653
2529
  }
2654
2530
 
2655
- .tds-page-header__primary{
2656
- width:100%;
2531
+ .tds-select > .tds-select-hidden-select{
2532
+ position:absolute;
2533
+ inline-size:1px;
2534
+ block-size:1px;
2535
+ padding:0;
2536
+ margin:0;
2537
+ pointer-events:none;
2538
+ opacity:0;
2657
2539
  }
2658
2540
 
2659
- .tds-page-header__primary h1{
2660
- margin:0;
2661
- font-size:var(--tds-page-header-headline-font-size);
2662
- font-weight:var(--t-font-weight-normal);
2663
- line-height:32px;
2664
- color:var(--tds-page-header-headline-color);
2665
- overflow-wrap:break-word;
2541
+ .tds-select:has(> button){
2542
+ anchor-scope:--tds-select-anchor;
2543
+ }
2544
+
2545
+ .tds-select:has( > button) > button{
2546
+ display:block;
2547
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
2548
+ anchor-name:--tds-select-anchor;
2549
+ overflow:hidden;
2550
+ text-overflow:ellipsis;
2551
+ color:var(--tds-select-placeholder-color);
2552
+ white-space:nowrap;
2553
+ background-image:none;
2554
+ transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
2555
+ -webkit-tap-highlight-color:transparent;
2666
2556
  }
2667
2557
 
2668
- @media (min-width: 960px){
2669
- .tds-page-header__primary{
2670
- flex:1 1 max-content;
2671
- width:auto;
2672
- min-width:0;
2673
- max-width:100%;
2558
+ :is(.tds-select:has( > button) > button)::after{
2559
+ position:absolute;
2560
+ inset-block:0;
2561
+ inset-inline-end:var(--tds-select-caret-inline-offset);
2562
+ width:var(--tds-select-caret-size);
2563
+ height:var(--tds-select-caret-size);
2564
+ margin-block:auto;
2565
+ line-height:1;
2566
+ pointer-events:none;
2567
+ content:var(--tds-select-background-image);
2568
+ transform:rotate(0);
2569
+ transition:var(--tds-select-caret-transition);
2570
+ }
2571
+
2572
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
2573
+ color:var(--tds-select-color);
2674
2574
  }
2675
2575
 
2676
- .tds-page-header__title-bar,
2677
- .tds-page-header--profile .tds-page-header__title-bar{
2678
- flex-flow:row nowrap;
2679
- row-gap:12px;
2680
- align-items:flex-start;
2576
+ .tds-select:has( > button) [popover]{
2577
+ inset:auto;
2578
+ inline-size:-moz-max-content;
2579
+ inline-size:max-content;
2580
+ min-inline-size:anchor-size(width);
2581
+ max-inline-size:100vi;
2582
+ max-block-size:min(50vh, 20rem);
2583
+ padding:var(--tds-select-dropdown-padding);
2584
+ margin-block:var(--tds-select-dropdown-margin-block);
2585
+ position-area:block-end span-inline-start;
2586
+ position-anchor:--tds-select-anchor;
2587
+ position-try-fallbacks:flip-block, flip-inline;
2588
+ overflow:auto;
2589
+ overflow-x:hidden;
2590
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2591
+ overscroll-behavior:none;
2592
+ -webkit-user-select:none;
2593
+ -moz-user-select:none;
2594
+ user-select:none;
2595
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
2596
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2597
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2598
+ background:var(--tds-select-dropdown-background-color);
2599
+ border:var(--tds-select-dropdown-border);
2600
+ border-radius:var(--tds-select-dropdown-border-radius);
2601
+ box-shadow:var(--tds-select-dropdown-box-shadow);
2602
+ opacity:var(--tds-select-dropdown-open-opacity);
2603
+ translate:var(--tds-select-dropdown-open-translate);
2604
+ transition:var(--tds-select-dropdown-transition);
2681
2605
  }
2682
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2683
- width:auto;
2684
- }
2685
2606
 
2686
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2687
- justify-content:flex-end;
2607
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
2608
+ opacity:var(--tds-select-dropdown-closed-opacity);
2609
+ translate:var(--tds-select-dropdown-closed-translate);
2688
2610
  }
2689
- }
2690
2611
 
2691
- .tds-page-header-phone,
2692
- .tds-page-header-email{
2693
- color:var(--tds-page-header-color);
2694
- white-space:nowrap;
2695
- }
2612
+ :is(.tds-select:has( > button) [popover]) ul{
2613
+ padding:0;
2614
+ margin:0;
2615
+ list-style:none;
2616
+ }
2696
2617
 
2697
- .tds-page-header-email{
2698
- max-width:100%;
2699
- overflow:hidden;
2700
- text-overflow:ellipsis;
2701
- }
2618
+ @starting-style{
2619
+ :is(.tds-select:has( > button) [popover]):popover-open{
2620
+ opacity:var(--tds-select-dropdown-closed-opacity);
2621
+ translate:var(--tds-select-dropdown-closed-translate);
2622
+ }
2623
+ }
2702
2624
 
2703
- @keyframes indicator-pulse{
2704
- 0%{
2705
- opacity:.3;
2706
- transform:scale(.9);
2625
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
2626
+ .tds-select select:has(> button){
2627
+ padding-inline-end:0;
2628
+ background-image:none;
2707
2629
  }
2630
+ @media (hover) and (pointer: fine){
2631
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
2632
+ padding-block:0;
2633
+ -webkit-appearance:base-select;
2634
+ -moz-appearance:base-select;
2635
+ appearance:base-select;
2636
+ }
2637
+ }
2638
+ :is(.tds-select select:has( > button))::picker-icon{
2639
+ flex-shrink:0;
2640
+ width:var(--tds-select-caret-size);
2641
+ height:var(--tds-select-caret-size);
2642
+ margin-inline-end:var(--tds-select-caret-inline-offset);
2643
+ line-height:1;
2644
+ content:var(--tds-select-background-image);
2645
+ transition:var(--tds-select-caret-transition);
2646
+ }
2708
2647
 
2709
- 100%{
2710
- opacity:0;
2711
- transform:scale(1.75);
2712
- }
2648
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
2649
+ opacity:var(--tds-select-dropdown-closed-opacity);
2650
+ translate:var(--tds-select-dropdown-closed-translate);
2651
+ }
2652
+
2653
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
2654
+ outline-color:var(--t-focus-ring-color);
2655
+ outline-offset:var(--t-focus-ring-offset);
2656
+ border-color:var(--tds-select-border-color-active);
2657
+ }
2658
+
2659
+ :is(.tds-select select:has( > button)):open::picker-icon{
2660
+ opacity:1;
2661
+ transform:rotate(.5turn);
2662
+ }
2663
+
2664
+ :is(.tds-select select:has( > button)) selectedcontent{
2665
+ overflow:hidden;
2666
+ text-overflow:ellipsis;
2667
+ line-height:calc(var(--tds-select-min-height) - 2px);
2668
+ white-space:nowrap;
2669
+ }
2670
+
2671
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
2672
+ color:var(--tds-select-placeholder-color);
2673
+ }
2674
+
2675
+ :is(.tds-select select:has( > button))::picker(select){
2676
+ inset:auto;
2677
+ inline-size:-moz-max-content;
2678
+ inline-size:max-content;
2679
+ min-inline-size:anchor-size(width);
2680
+ max-inline-size:100vi;
2681
+ padding:var(--tds-select-dropdown-padding);
2682
+ margin-block:var(--tds-select-dropdown-margin-block);
2683
+ position-area:block-end span-inline-start;
2684
+ position-try-fallbacks:flip-block, flip-inline;
2685
+ overflow:auto;
2686
+ overflow-x:hidden;
2687
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2688
+ overscroll-behavior:none;
2689
+ -webkit-user-select:none;
2690
+ -moz-user-select:none;
2691
+ user-select:none;
2692
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2693
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2694
+ background:var(--tds-select-dropdown-background-color);
2695
+ border:var(--tds-select-dropdown-border);
2696
+ border-radius:var(--tds-select-dropdown-border-radius);
2697
+ box-shadow:var(--tds-select-dropdown-box-shadow);
2698
+ opacity:var(--tds-select-dropdown-open-opacity);
2699
+ translate:var(--tds-select-dropdown-open-translate);
2700
+ transition:var(--tds-select-dropdown-transition);
2701
+ }
2702
+
2703
+ :is(.tds-select select:has( > button)) option::checkmark{
2704
+ display:none;
2705
+ }
2706
+
2707
+ @starting-style{
2708
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
2709
+ opacity:var(--tds-select-dropdown-closed-opacity);
2710
+ translate:var(--tds-select-dropdown-closed-translate);
2711
+ }
2712
+ }
2713
2713
  }
2714
2714
 
2715
2715
  .tds-loading-spinner{
@@ -2794,11 +2794,19 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2794
2794
  transition-property:color, background-color, border-color, box-shadow, fill, stroke, opacity;
2795
2795
  }
2796
2796
 
2797
- .tds-btn:where(.tds-btn--icononly,:has(.prefix,svg:not(.suffix))){
2797
+ .tds-btn:where(.tds-btn--icononly,.tds-btn--prefix){
2798
+ padding-left:var(--tds-btn-padding-truncated-x);
2799
+ }
2800
+
2801
+ .tds-btn:where(.tds-btn--icononly,.tds-btn--suffix){
2802
+ padding-right:var(--tds-btn-padding-truncated-x);
2803
+ }
2804
+
2805
+ .tds-btn.tds-btn--icononly,.tds-btn.tds-btn--prefix{
2798
2806
  padding-left:var(--tds-btn-padding-truncated-x);
2799
2807
  }
2800
2808
 
2801
- .tds-btn:where(.tds-btn--icononly,:has(.suffix,svg:not(.prefix))){
2809
+ .tds-btn.tds-btn--icononly,.tds-btn.tds-btn--suffix{
2802
2810
  padding-right:var(--tds-btn-padding-truncated-x);
2803
2811
  }
2804
2812