@planningcenter/tapestry 3.2.2-rc.4 → 3.2.2-rc.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +1296 -1296
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1296 -1296
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,3 +1,365 @@
1
+
2
+ @media (prefers-reduced-motion: no-preference){
3
+
4
+ :root{
5
+ interpolate-size:allow-keywords;
6
+ }
7
+ }
8
+
9
+ @layer tds-component{
10
+ tds-sidenav,
11
+ .tds-sidenav{
12
+ --tds-sidenav-indent:12px;
13
+ --tds-sidenav-item-depth:0;
14
+
15
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
16
+
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);
23
+
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);
28
+
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;
32
+
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);
36
+
37
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
39
+ }
40
+
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
+ }
50
+
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
+ }
59
+
60
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
+ display:flex;
62
+ }
63
+
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
+ }
69
+
70
+ .tds-sidenav-section-list{
71
+ width:100%;
72
+ padding:0;
73
+ margin:0;
74
+ list-style:none;
75
+ }
76
+
77
+ .tds-sidenav-section-header{
78
+ display:flex;
79
+ align-items:baseline;
80
+ justify-content:space-between;
81
+ padding-top:var(--t-spacing-2);
82
+ }
83
+
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;
91
+ }
92
+
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"]{
98
+ display:flex;
99
+ gap:var(--t-spacing-half);
100
+ align-items:center;
101
+ }
102
+
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){
119
+ position:relative;
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;
131
+ -webkit-appearance:none;
132
+ -moz-appearance:none;
133
+ appearance:none;
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
+ }
140
+
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;
148
+ }
149
+
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;
154
+ }
155
+
156
+ :is(.tds-sidenav-item :is(a,button)):active{
157
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
158
+ }
159
+
160
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
+ overflow:hidden;
162
+ color:var(--tds-sidenav-item-icon-color);
163
+ }
164
+
165
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
166
+ display:block;
167
+ width:var(--tds-sidenav-item-icon-size);
168
+ height:var(--tds-sidenav-item-icon-size);
169
+ }
170
+
171
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
+ --tds-sidenav-indent:19px;
173
+ }
174
+
175
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
176
+ visibility:visible;
177
+ block-size:auto;
178
+ opacity:1;
179
+ }
180
+
181
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
182
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
183
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
184
+
185
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
186
+ font-weight:var(--t-font-weight-semibold);
187
+ }
188
+
189
+ .tds-sidenav-item:has(.tds-sidenav-section){
190
+ display:flex;
191
+ flex-direction:column;
192
+ gap:var(--t-spacing-half);
193
+ }
194
+
195
+ .tds-sidenav-item .tds-sidenav-section-list{
196
+ --tds-sidenav-item-depth:1;
197
+ gap:0;
198
+ }
199
+
200
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
201
+ visibility:hidden;
202
+ block-size:0;
203
+ overflow-y:clip;
204
+ opacity:0;
205
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
206
+ }
207
+
208
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
+ --tds-sidenav-item-depth:2;
210
+ }
211
+
212
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
213
+ min-height:var(--t-element-size-2xl);
214
+ padding-block:9px;
215
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
216
+ line-height:1;
217
+ background-color:transparent;
218
+ }
219
+
220
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
221
+ position:absolute;
222
+ top:0;
223
+ bottom:0;
224
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
225
+ width:2px;
226
+ content:"";
227
+ background-color:var(--tds-sidenav-item-nested-border-color);
228
+ transition:var(--tds-sidenav-item-transition);
229
+ }
230
+
231
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
232
+ position:absolute;
233
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
+ z-index:-1;
235
+ height:100%;
236
+ content:"";
237
+ background-color:var(--tds-sidenav-item-nested-background);
238
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
239
+ transition:var(--tds-sidenav-item-transition);
240
+ }
241
+
242
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
243
+ display:block;
244
+ text-align:left;
245
+ white-space:normal;
246
+ }
247
+
248
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
249
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
250
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
251
+ }
252
+
253
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
254
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
255
+ }
256
+
257
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
258
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
259
+ font-weight:var(--t-font-weight-medium);
260
+ }
261
+
262
+ .tds-sidenav-responsive-header{
263
+ display:flex;
264
+ gap:var(--t-spacing-2);
265
+ align-items:center;
266
+ width:100%;
267
+ }
268
+
269
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
+ order:0;
271
+ }
272
+
273
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
+ flex:1;
275
+ order:1;
276
+ margin:0;
277
+ font-size:var(--t-font-size-lg);
278
+ font-weight:var(--t-font-weight-medium);
279
+ color:var(--t-text-color-headline);
280
+ }
281
+
282
+ @media (max-width: 719px){
283
+ .tds-sidenav-collapse{
284
+ z-index:10001;
285
+ display:none;
286
+ max-width:min(448px, calc(100vw - 48px));
287
+ padding:0;
288
+ margin:12px 0;
289
+ position-area:bottom span-right;
290
+ overflow:hidden;
291
+ outline:0;
292
+ background:var(--t-surface-color-card);
293
+ border:0;
294
+ border-radius:6px;
295
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
296
+ opacity:var(--tds-sidenav-collapse-open-opacity);
297
+ transform:var(--tds-sidenav-collapse-open-transform);
298
+ transition:var(--tds-sidenav-collapse-transition-enter);
299
+ will-change:transform;
300
+ }
301
+
302
+ .tds-sidenav-scroll-container{
303
+ --webkit-overflow-scrolling:touch;
304
+ display:block;
305
+ width:100%;
306
+ height:-moz-fit-content;
307
+ height:fit-content;
308
+ padding:var(--t-spacing-2);
309
+ overflow-y:auto;
310
+ }
311
+
312
+ .tds-sidenav-item :is(a, button) :is(.prefix){
313
+ display:none;
314
+ }
315
+ @supports selector(:popover-open){
316
+ .tds-sidenav-collapse:popover-open{
317
+ display:flex;
318
+ }
319
+
320
+ .tds-sidenav-collapse:not(:popover-open){
321
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
322
+ transition:var(--tds-sidenav-collapse-transition-exit);
323
+ }
324
+
325
+ @starting-style{
326
+ .tds-sidenav-collapse:popover-open{
327
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
328
+ transform:var(--tds-sidenav-collapse-closed-transform);
329
+ }
330
+ }
331
+ }
332
+ @supports not selector(:popover-open){
333
+ .tds-sidenav-collapse.\:popover-open{
334
+ display:flex;
335
+ }
336
+
337
+ .tds-sidenav-collapse:not(.\:popover-open){
338
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
339
+ transition:var(--tds-sidenav-collapse-transition-exit);
340
+ }
341
+ }
342
+ }
343
+
344
+ @media (min-width: 720px){
345
+ .tds-sidenav-responsive-header{
346
+ display:none;
347
+ }
348
+ }
349
+
350
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
+ display:none;
352
+ }
353
+
354
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
+ display:block;
356
+ }
357
+
358
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
+ display:flex;
360
+ flex-direction:column;
361
+ }
362
+
1
363
  @layer t-critical{
2
364
  tds-page-header:not(.hydrated){
3
365
  display:none;
@@ -261,198 +623,91 @@
261
623
  }
262
624
  }
263
625
 
264
- .tds-checkbox{
265
- --tds-checkbox-font-size:var(--t-font-size-md);
266
- --tds-checkbox-cursor:pointer;
267
- --tds-checkbox-line-height:1.4;
268
- --tds-checkbox-transition-property:background-color, border-color;
269
-
270
- --tds-checkbox-input-size:var(--t-element-size-md);
271
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
272
- --tds-checkbox-input-border-color:var(--t-form-border-color);
273
- --tds-checkbox-input-background-color:transparent;
274
-
275
- --tds-checkbox-input-icon:none;
276
- --tds-checkbox-input-icon-visibility:hidden;
277
- --tds-checkbox-input-icon-opacity:0;
278
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
626
+ .tds-radio-group{
627
+ --tds-radio-group-font-size:var(--t-font-size-md);
628
+ --tds-radio-group-line-height:1.4;
629
+ --tds-radio-group-gap:var(--t-spacing-1);
279
630
 
280
- --tds-checkbox-label-color:var(--t-form-color);
631
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
281
632
 
282
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
283
- --tds-checkbox-description-line-height:1.35;
284
- --tds-checkbox-description-color:var(--t-text-color-secondary);
285
- --tds-checkbox-description-invalid-icon-display:none;
633
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
634
+ --tds-radio-group-description-line-height:1.35;
635
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
636
+ --tds-radio-group-description-invalid-icon-display:none;
637
+ display:flex;
638
+ flex-direction:column;
639
+ gap:var(--tds-radio-group-gap);
640
+ padding:0;
641
+ margin:0;
286
642
 
287
- position:relative;
288
- display:inline-grid;
289
- grid-template-columns:auto;
290
- grid-auto-columns:1fr;
291
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
292
- line-height:var(--tds-checkbox-line-height);
293
- cursor:var(--tds-checkbox-cursor);
294
- -webkit-user-select:none;
295
- -moz-user-select:none;
296
- user-select:none;
643
+ font-size:var(--tds-radio-group-font-size);
644
+ line-height:var(--tds-radio-group-line-height);
645
+ border:0;
297
646
  }
298
647
 
299
- .tds-checkbox label{
300
- grid-area:1 / 2;
301
- font-size:var(--tds-checkbox-font-size);
302
- font-weight:var(--t-font-weight-normal);
303
- color:var(--tds-checkbox-label-color);
304
- cursor:var(--tds-checkbox-cursor);
305
- }
306
-
307
- .tds-checkbox tds-indeterminate{
308
- display:flex;
309
- }
310
-
311
- .tds-checkbox input[type="checkbox"]{
312
- position:relative;
313
- width:1em;
314
- height:1em;
315
- margin:calc((1lh - 1em) / 2) 0 0;
316
- font-size:var(--tds-checkbox-font-size);
317
- line-height:inherit;
318
- -webkit-appearance:none;
319
- -moz-appearance:none;
320
- appearance:none;
321
- cursor:var(--tds-checkbox-cursor);
322
- background-color:var(--tds-checkbox-input-background-color);
323
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
324
- border-radius:var(--tds-checkbox-input-border-radius);
325
- transition-timing-function:var(--t-ease-in-out);
326
- transition-duration:var(--t-duration-200);
327
- transition-property:var(--tds-checkbox-transition-property);
328
- }
329
-
330
- :is(.tds-checkbox input[type="checkbox"])::before{
331
- position:absolute;
332
- top:50%;
333
- left:50%;
334
- visibility:var(--tds-checkbox-input-icon-visibility);
335
- width:100%;
336
- height:100%;
337
- content:"";
338
- background-color:var(--tds-checkbox-input-icon-fill);
339
- border-radius:var(--tds-checkbox-input-border-radius);
340
- opacity:var(--tds-checkbox-input-icon-opacity);
341
- -webkit-mask-image:var(--tds-checkbox-input-icon);
342
- mask-image:var(--tds-checkbox-input-icon);
343
- -webkit-mask-repeat:no-repeat;
344
- mask-repeat:no-repeat;
345
- -webkit-mask-size:contain;
346
- mask-size:contain;
347
- transform:translate(-50%, -50%);
348
- }
349
-
350
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
351
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
352
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
353
- }
354
-
355
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
356
- outline:var(--t-focus-ring-outline);
357
- outline-offset:var(--t-focus-ring-offset);
358
- }
359
-
360
- :is(.tds-checkbox input[type="checkbox"]):disabled{
361
- pointer-events:none;
362
- }
363
-
364
- @media (prefers-reduced-motion: reduce){
365
-
366
- .tds-checkbox input[type="checkbox"]{
367
- --tds-checkbox-transition-property:none;
368
- }
369
- }
370
-
371
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
372
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
373
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
374
- --tds-checkbox-input-icon-visibility:visible;
375
- --tds-checkbox-input-icon-opacity:1;
376
- }
377
-
378
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
379
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
380
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
381
- }
382
-
383
- .tds-checkbox:has(input:checked){
384
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
648
+ .tds-radio-group legend{
649
+ padding:0;
650
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
385
651
  }
386
652
 
387
- .tds-checkbox:has(input:indeterminate){
388
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
653
+ .tds-radio-group:has(.tds-radio-group-description){
654
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
389
655
  }
390
656
 
391
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
392
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
393
- --tds-checkbox-description-color:var(--t-text-color-status-error);
394
- --tds-checkbox-description-invalid-icon-display:inline-block;
657
+ .tds-radio-group[aria-invalid="true"]{
658
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
659
+ --tds-radio-group-description-invalid-icon-display:inline-block;
395
660
  }
396
661
 
397
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
398
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
399
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
662
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
663
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
400
664
  }
401
665
 
402
- :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{
403
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
404
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
405
- }
666
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
667
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
668
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
669
+ }
406
670
 
407
- :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){
408
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
409
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
671
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
672
+ --tds-radio-input-background-color:var(--t-form-background-color);
410
673
  }
411
674
 
412
- .tds-checkbox:has(input:required) label::after{
675
+ .tds-radio-group:has(input:required) legend::after{
413
676
  margin-left:.25ch;
414
677
  color:var(--t-text-color-status-error);
415
678
  content:"*";
416
679
  }
417
680
 
418
- .tds-checkbox:has(input:disabled){
419
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
420
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
421
-
422
- --tds-checkbox-label-color:var(--t-form-color-disabled);
423
- --tds-checkbox-description-color:var(--t-form-color-disabled);
424
- --tds-checkbox-cursor:not-allowed;
425
- }
426
-
427
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
428
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
429
- }
681
+ .tds-radio-group-fields{
682
+ display:flex;
683
+ flex-direction:column;
684
+ gap:var(--tds-radio-group-gap);
685
+ align-items:flex-start;
686
+ }
430
687
 
431
- .tds-checkbox-description{
688
+ .tds-radio-group-description{
432
689
  display:flex;
433
- grid-area:2 / 2;
434
690
  gap:var(--t-spacing-half);
435
691
  align-items:flex-start;
436
692
  margin:0;
437
- font-size:var(--tds-checkbox-description-font-size);
438
- line-height:var(--tds-checkbox-description-line-height);
439
- color:var(--tds-checkbox-description-color);
693
+ font-size:var(--tds-radio-group-description-font-size);
694
+ line-height:var(--tds-radio-group-description-line-height);
695
+ color:var(--tds-radio-group-description-color);
440
696
  cursor:text;
441
697
  }
442
698
 
443
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
444
- display:var(--tds-checkbox-description-invalid-icon-display);
699
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
700
+ display:var(--tds-radio-group-description-invalid-icon-display);
445
701
  flex-shrink:0;
446
702
  margin-top:calc(.5lh - .5em);
447
- line-height:var(--tds-checkbox-description-line-height);
703
+ line-height:var(--tds-radio-group-description-line-height);
448
704
  }
449
705
 
450
- .tds-checkbox--sm{
451
- --tds-checkbox-line-height:1.35;
452
- --tds-checkbox-input-size:var(--t-element-size-sm);
453
- --tds-checkbox-font-size:var(--t-font-size-sm);
454
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
455
- --tds-checkbox-description-line-height:1.3;
706
+ .tds-radio-group--sm{
707
+ --tds-radio-group-line-height:1.35;
708
+ --tds-radio-group-font-size:var(--t-font-size-sm);
709
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
710
+ --tds-radio-group-description-line-height:1.3;
456
711
  }
457
712
 
458
713
 
@@ -479,367 +734,304 @@
479
734
  }
480
735
  }
481
736
 
737
+ .tds-checkbox{
738
+ --tds-checkbox-font-size:var(--t-font-size-md);
739
+ --tds-checkbox-cursor:pointer;
740
+ --tds-checkbox-line-height:1.4;
741
+ --tds-checkbox-transition-property:background-color, border-color;
482
742
 
483
- @media (prefers-reduced-motion: no-preference){
484
-
485
- :root{
486
- interpolate-size:allow-keywords;
487
- }
488
- }
489
-
490
- @layer tds-component{
491
- tds-sidenav,
492
- .tds-sidenav{
493
- --tds-sidenav-indent:12px;
494
- --tds-sidenav-item-depth:0;
495
-
496
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
497
-
498
- --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;
499
- --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;
500
- --tds-sidenav-collapse-closed-opacity:0;
501
- --tds-sidenav-collapse-open-opacity:1;
502
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
503
- --tds-sidenav-collapse-open-transform:translateY(0);
504
-
505
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
506
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
507
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
508
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
509
-
510
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
511
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
512
- --tds-sidenav-item-nested-background-selected:transparent;
513
-
514
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
515
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
516
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
517
-
518
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
519
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
520
- }
521
-
522
- @media (prefers-reduced-motion: reduce){
523
- tds-sidenav,
524
- .tds-sidenav{
525
- --tds-sidenav-collapse-transition-enter:none;
526
- --tds-sidenav-collapse-transition-exit:none;
527
- --tds-sidenav-collapse-closed-transform:none;
528
- --tds-sidenav-collapse-open-transform:none;
529
- }
530
- }
531
-
532
- .tds-sidenav--theme-gray{
533
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
534
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
535
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
536
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
537
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
538
- }
539
- }
743
+ --tds-checkbox-input-size:var(--t-element-size-md);
744
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
745
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
746
+ --tds-checkbox-input-background-color:transparent;
540
747
 
541
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
542
- display:flex;
543
- }
748
+ --tds-checkbox-input-icon:none;
749
+ --tds-checkbox-input-icon-visibility:hidden;
750
+ --tds-checkbox-input-icon-opacity:0;
751
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
544
752
 
545
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
546
- flex-direction:column;
547
- gap:var(--t-spacing-half);
548
- width:100%;
549
- }
753
+ --tds-checkbox-label-color:var(--t-form-color);
550
754
 
551
- .tds-sidenav-section-list{
552
- width:100%;
553
- padding:0;
554
- margin:0;
555
- list-style:none;
556
- }
755
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
756
+ --tds-checkbox-description-line-height:1.35;
757
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
758
+ --tds-checkbox-description-invalid-icon-display:none;
557
759
 
558
- .tds-sidenav-section-header{
559
- display:flex;
560
- align-items:baseline;
561
- justify-content:space-between;
562
- padding-top:var(--t-spacing-2);
760
+ position:relative;
761
+ display:inline-grid;
762
+ grid-template-columns:auto;
763
+ grid-auto-columns:1fr;
764
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
765
+ line-height:var(--tds-checkbox-line-height);
766
+ cursor:var(--tds-checkbox-cursor);
767
+ -webkit-user-select:none;
768
+ -moz-user-select:none;
769
+ user-select:none;
563
770
  }
564
771
 
565
- .tds-sidenav-section-header h2{
566
- margin:0;
567
- font-size:var(--t-font-size-sm);
568
- font-weight:var(--t-font-weight-semibold);
569
- line-height:1.35;
570
- color:var(--t-text-color-secondary);
571
- text-transform:uppercase;
572
- }
573
-
574
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
575
- padding-top:0;
772
+ .tds-checkbox label{
773
+ grid-area:1 / 2;
774
+ font-size:var(--tds-checkbox-font-size);
775
+ font-weight:var(--t-font-weight-normal);
776
+ color:var(--tds-checkbox-label-color);
777
+ cursor:var(--tds-checkbox-cursor);
576
778
  }
577
779
 
578
- .tds-sidenav-section-header [slot="label-actions"]{
780
+ .tds-checkbox tds-indeterminate{
579
781
  display:flex;
580
- gap:var(--t-spacing-half);
581
- align-items:center;
582
782
  }
583
783
 
584
- .tds-sidenav-section [slot="section-actions"]{
585
- display:flex;
586
- gap:12px;
587
- align-items:center;
588
- min-height:42px;
589
- padding:var(--t-spacing-1) 0;
590
- }
591
-
592
- .tds-sidenav-section-list,
593
- .tds-sidenav-item{
594
- width:100%;
595
- padding:0;
596
- margin:0;
597
- }
598
-
599
- .tds-sidenav-item :is(a,button){
784
+ .tds-checkbox input[type="checkbox"]{
600
785
  position:relative;
601
- display:flex;
602
- gap:12px;
603
- align-items:center;
604
- width:100%;
605
- padding:12px;
606
- overflow:hidden;
607
- font-size:var(--t-font-size-sm);
608
- line-height:18px;
609
- color:var(--t-text-color-headline);
610
- white-space:nowrap;
611
- text-decoration:none;
786
+ width:1em;
787
+ height:1em;
788
+ margin:calc((1lh - 1em) / 2) 0 0;
789
+ font-size:var(--tds-checkbox-font-size);
790
+ line-height:inherit;
612
791
  -webkit-appearance:none;
613
792
  -moz-appearance:none;
614
793
  appearance:none;
615
- cursor:pointer;
616
- background-color:var(--tds-sidenav-item-background, transparent);
617
- border:0;
618
- border-radius:var(--t-border-radius);
619
- transition:var(--tds-sidenav-item-transition);
794
+ cursor:var(--tds-checkbox-cursor);
795
+ background-color:var(--tds-checkbox-input-background-color);
796
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
797
+ border-radius:var(--tds-checkbox-input-border-radius);
798
+ transition-timing-function:var(--t-ease-in-out);
799
+ transition-duration:var(--t-duration-200);
800
+ transition-property:var(--tds-checkbox-transition-property);
620
801
  }
621
802
 
622
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
623
- display:block;
624
- flex:1;
625
- overflow:hidden;
626
- text-overflow:ellipsis;
627
- text-align:left;
628
- white-space:nowrap;
629
- }
630
-
631
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
632
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
633
- color:var(--t-text-color-headline);
634
- text-decoration:none;
635
- }
636
-
637
- :is(.tds-sidenav-item :is(a,button)):active{
638
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
803
+ :is(.tds-checkbox input[type="checkbox"])::before{
804
+ position:absolute;
805
+ top:50%;
806
+ left:50%;
807
+ visibility:var(--tds-checkbox-input-icon-visibility);
808
+ width:100%;
809
+ height:100%;
810
+ content:"";
811
+ background-color:var(--tds-checkbox-input-icon-fill);
812
+ border-radius:var(--tds-checkbox-input-border-radius);
813
+ opacity:var(--tds-checkbox-input-icon-opacity);
814
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
815
+ mask-image:var(--tds-checkbox-input-icon);
816
+ -webkit-mask-repeat:no-repeat;
817
+ mask-repeat:no-repeat;
818
+ -webkit-mask-size:contain;
819
+ mask-size:contain;
820
+ transform:translate(-50%, -50%);
639
821
  }
640
822
 
641
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
642
- overflow:hidden;
643
- color:var(--tds-sidenav-item-icon-color);
823
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
824
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
825
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
644
826
  }
645
827
 
646
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
647
- display:block;
648
- width:var(--tds-sidenav-item-icon-size);
649
- height:var(--tds-sidenav-item-icon-size);
650
- }
651
-
652
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
653
- --tds-sidenav-indent:19px;
828
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
829
+ outline:var(--t-focus-ring-outline);
830
+ outline-offset:var(--t-focus-ring-offset);
654
831
  }
655
-
656
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
657
- visibility:visible;
658
- block-size:auto;
659
- opacity:1;
832
+
833
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
834
+ pointer-events:none;
660
835
  }
661
836
 
662
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
663
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
664
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
837
+ @media (prefers-reduced-motion: reduce){
665
838
 
666
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
667
- font-weight:var(--t-font-weight-semibold);
839
+ .tds-checkbox input[type="checkbox"]{
840
+ --tds-checkbox-transition-property:none;
668
841
  }
842
+ }
669
843
 
670
- .tds-sidenav-item:has(.tds-sidenav-section){
671
- display:flex;
672
- flex-direction:column;
673
- gap:var(--t-spacing-half);
844
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
845
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
846
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
847
+ --tds-checkbox-input-icon-visibility:visible;
848
+ --tds-checkbox-input-icon-opacity:1;
674
849
  }
675
850
 
676
- .tds-sidenav-item .tds-sidenav-section-list{
677
- --tds-sidenav-item-depth:1;
678
- gap:0;
851
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
852
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
853
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
854
+ }
855
+
856
+ .tds-checkbox:has(input:checked){
857
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
679
858
  }
680
859
 
681
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
682
- visibility:hidden;
683
- block-size:0;
684
- overflow-y:clip;
685
- opacity:0;
686
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
687
- }
860
+ .tds-checkbox:has(input:indeterminate){
861
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
862
+ }
688
863
 
689
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
690
- --tds-sidenav-item-depth:2;
691
- }
864
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
865
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
866
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
867
+ --tds-checkbox-description-invalid-icon-display:inline-block;
868
+ }
692
869
 
693
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
694
- min-height:var(--t-element-size-2xl);
695
- padding-block:9px;
696
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
697
- line-height:1;
698
- background-color:transparent;
870
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
871
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
872
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
699
873
  }
700
874
 
701
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
702
- position:absolute;
703
- top:0;
704
- bottom:0;
705
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
706
- width:2px;
707
- content:"";
708
- background-color:var(--tds-sidenav-item-nested-border-color);
709
- transition:var(--tds-sidenav-item-transition);
710
- }
875
+ :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{
876
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
877
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
878
+ }
711
879
 
712
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
713
- position:absolute;
714
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
715
- z-index:-1;
716
- height:100%;
717
- content:"";
718
- background-color:var(--tds-sidenav-item-nested-background);
719
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
720
- transition:var(--tds-sidenav-item-transition);
880
+ :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){
881
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
882
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
721
883
  }
722
884
 
723
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
724
- display:block;
725
- text-align:left;
726
- white-space:normal;
727
- }
885
+ .tds-checkbox:has(input:required) label::after{
886
+ margin-left:.25ch;
887
+ color:var(--t-text-color-status-error);
888
+ content:"*";
889
+ }
728
890
 
729
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
730
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
731
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
732
- }
891
+ .tds-checkbox:has(input:disabled){
892
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
893
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
733
894
 
734
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
735
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
736
- }
895
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
896
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
897
+ --tds-checkbox-cursor:not-allowed;
898
+ }
737
899
 
738
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
739
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
740
- font-weight:var(--t-font-weight-medium);
900
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
901
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
741
902
  }
742
903
 
743
- .tds-sidenav-responsive-header{
904
+ .tds-checkbox-description{
744
905
  display:flex;
745
- gap:var(--t-spacing-2);
746
- align-items:center;
747
- width:100%;
906
+ grid-area:2 / 2;
907
+ gap:var(--t-spacing-half);
908
+ align-items:flex-start;
909
+ margin:0;
910
+ font-size:var(--tds-checkbox-description-font-size);
911
+ line-height:var(--tds-checkbox-description-line-height);
912
+ color:var(--tds-checkbox-description-color);
913
+ cursor:text;
748
914
  }
749
915
 
750
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
751
- order:0;
916
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
917
+ display:var(--tds-checkbox-description-invalid-icon-display);
918
+ flex-shrink:0;
919
+ margin-top:calc(.5lh - .5em);
920
+ line-height:var(--tds-checkbox-description-line-height);
752
921
  }
753
922
 
754
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
755
- flex:1;
756
- order:1;
757
- margin:0;
758
- font-size:var(--t-font-size-lg);
759
- font-weight:var(--t-font-weight-medium);
760
- color:var(--t-text-color-headline);
761
- }
923
+ .tds-checkbox--sm{
924
+ --tds-checkbox-line-height:1.35;
925
+ --tds-checkbox-input-size:var(--t-element-size-sm);
926
+ --tds-checkbox-font-size:var(--t-font-size-sm);
927
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
928
+ --tds-checkbox-description-line-height:1.3;
929
+ }
762
930
 
763
- @media (max-width: 719px){
764
- .tds-sidenav-collapse{
765
- z-index:10001;
766
- display:none;
767
- max-width:min(448px, calc(100vw - 48px));
768
- padding:0;
769
- margin:12px 0;
770
- position-area:bottom span-right;
771
- overflow:hidden;
772
- outline:0;
773
- background:var(--t-surface-color-card);
774
- border:0;
775
- border-radius:6px;
776
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
777
- opacity:var(--tds-sidenav-collapse-open-opacity);
778
- transform:var(--tds-sidenav-collapse-open-transform);
779
- transition:var(--tds-sidenav-collapse-transition-enter);
780
- will-change:transform;
781
- }
931
+ .tds-input:has(textarea){
932
+ --tds-input-padding-block:6px;
933
+ --tds-input-resizer-size:var(--t-element-size-sm);
934
+ --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");
935
+ }
782
936
 
783
- .tds-sidenav-scroll-container{
784
- --webkit-overflow-scrolling:touch;
785
- display:block;
786
- width:100%;
787
- height:-moz-fit-content;
788
- height:fit-content;
789
- padding:var(--t-spacing-2);
790
- overflow-y:auto;
791
- }
937
+ @supports (x: attr(x type(*))){
792
938
 
793
- .tds-sidenav-item :is(a, button) :is(.prefix){
794
- display:none;
939
+ .tds-input:has(textarea){
940
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
941
+ }
795
942
  }
796
- @supports selector(:popover-open){
797
- .tds-sidenav-collapse:popover-open{
798
- display:flex;
943
+
944
+ .tds-input.tds-textarea--resize-vertical textarea{
945
+ resize:vertical;
799
946
  }
800
947
 
801
- .tds-sidenav-collapse:not(:popover-open){
802
- opacity:var(--tds-sidenav-collapse-closed-opacity);
803
- transition:var(--tds-sidenav-collapse-transition-exit);
948
+ .tds-input.tds-textarea--resize-none textarea{
949
+ resize:none;
804
950
  }
805
951
 
806
- @starting-style{
807
- .tds-sidenav-collapse:popover-open{
808
- opacity:var(--tds-sidenav-collapse-closed-opacity);
809
- transform:var(--tds-sidenav-collapse-closed-transform);
952
+ .tds-input.tds-textarea--resize-auto textarea{
953
+ resize:vertical;
954
+ }
955
+
956
+ @supports (field-sizing: content){
957
+ .tds-input.tds-textarea--resize-auto textarea{
958
+ field-sizing:content;
959
+ resize:none;
810
960
  }
811
961
  }
812
- }
813
- @supports not selector(:popover-open){
814
- .tds-sidenav-collapse.\:popover-open{
815
- display:flex;
962
+
963
+ .tds-input textarea{
964
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
965
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
966
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
967
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
968
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
969
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
970
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
971
+ --tds-input-scrollbar-thumb-border-radius:999px;
972
+ --tds-input-scrollbar-thumb-border-width:3px;
973
+ --tds-input-scrollbar-track-margin-block:.125rem;
974
+ scrollbar-color:initial;
975
+ transition-timing-function:var(--t-ease-in-out);
976
+ transition-duration:var(--t-duration-200);
977
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
978
+ }
979
+
980
+ @media (pointer: fine){
981
+ :is(.tds-input textarea)::-webkit-scrollbar{
982
+ width:12px;
983
+ height:12px;
984
+ cursor:default;
816
985
  }
817
986
 
818
- .tds-sidenav-collapse:not(.\:popover-open){
819
- opacity:var(--tds-sidenav-collapse-closed-opacity);
820
- transition:var(--tds-sidenav-collapse-transition-exit);
987
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
988
+ cursor:default;
989
+ background:var(--tds-input-scrollbar-thumb-color);
990
+ background-clip:content-box;
991
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
992
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
993
+ }
994
+
995
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
996
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
997
+ }
998
+
999
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1000
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1001
+ }
1002
+
1003
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1004
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
821
1005
  }
822
- }
823
- }
824
1006
 
825
- @media (min-width: 720px){
826
- .tds-sidenav-responsive-header{
827
- display:none;
828
- }
829
- }
1007
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1008
+ background:var(--tds-input-scrollbar-surface-color);
1009
+ }
830
1010
 
831
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
832
- display:none;
1011
+ :is(.tds-input textarea)::-webkit-resizer{
1012
+ background:var(--tds-input-resizer-icon) no-repeat;
1013
+ background-position:right bottom;
1014
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
833
1015
  }
834
1016
 
835
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
836
- display:block;
1017
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1018
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1019
+ cursor:default;
837
1020
  }
838
1021
 
839
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
840
- display:flex;
841
- flex-direction:column;
1022
+ @supports (-moz-appearance: none){
1023
+ :is(.tds-input textarea){
1024
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1025
+ scrollbar-width:thin;
1026
+ }
1027
+
1028
+ @media (hover){
1029
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1030
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1031
+ }
1032
+ }
842
1033
  }
1034
+ }
843
1035
 
844
1036
  .tds-toggle-switch{
845
1037
  --tds-toggle-switch-font-size:var(--t-font-size-md);
@@ -1039,273 +1231,81 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1039
1231
  transition-property:var(--tds-radio-transition-property);
1040
1232
  }
1041
1233
 
1042
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1043
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1044
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1045
- }
1046
-
1047
- :is(.tds-radio input[type="radio"]):focus-visible{
1048
- outline:var(--t-focus-ring-outline);
1049
- outline-offset:var(--t-focus-ring-offset);
1050
- }
1051
-
1052
- :is(.tds-radio input[type="radio"]):disabled{
1053
- pointer-events:none;
1054
- }
1055
-
1056
- @media (prefers-reduced-motion: reduce){
1057
-
1058
- .tds-radio input[type="radio"]{
1059
- --tds-radio-transition-property:none;
1060
- }
1061
- }
1062
-
1063
- .tds-radio:has(input:checked){
1064
- --tds-radio-input-background-color:var(--t-form-background-color);
1065
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1066
- --tds-radio-input-border-width:4px;
1067
- }
1068
-
1069
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1070
- --tds-radio-input-background-color:var(--t-form-background-color);
1071
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1072
- }
1073
-
1074
- .tds-radio:has(input:user-invalid){
1075
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1076
- }
1077
-
1078
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1079
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1080
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1081
- }
1082
-
1083
- .tds-radio:has(input:disabled){
1084
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1085
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1086
-
1087
- --tds-radio-label-color:var(--t-form-color-disabled);
1088
- --tds-radio-description-color:var(--t-form-color-disabled);
1089
- --tds-radio-cursor:not-allowed;
1090
- }
1091
-
1092
- .tds-radio:has(input:disabled) input:checked{
1093
- --tds-radio-input-background-color:var(--t-form-background-color);
1094
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1095
- }
1096
-
1097
- .tds-radio-description{
1098
- display:flex;
1099
- grid-area:2 / 2;
1100
- gap:var(--t-spacing-half);
1101
- align-items:flex-start;
1102
- margin:0;
1103
- font-size:var(--tds-radio-description-font-size);
1104
- line-height:var(--tds-radio-description-line-height);
1105
- color:var(--tds-radio-description-color);
1106
- cursor:text;
1107
- }
1108
-
1109
- .tds-radio--sm{
1110
- --tds-radio-line-height:1.35;
1111
- --tds-radio-input-size:var(--t-element-size-sm);
1112
- --tds-radio-font-size:var(--t-font-size-sm);
1113
- --tds-radio-description-font-size:var(--t-font-size-xs);
1114
- --tds-radio-description-line-height:1.3;
1115
- }
1116
-
1117
- .tds-radio-group{
1118
- --tds-radio-group-font-size:var(--t-font-size-md);
1119
- --tds-radio-group-line-height:1.4;
1120
- --tds-radio-group-gap:var(--t-spacing-1);
1121
-
1122
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1123
-
1124
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1125
- --tds-radio-group-description-line-height:1.35;
1126
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1127
- --tds-radio-group-description-invalid-icon-display:none;
1128
- display:flex;
1129
- flex-direction:column;
1130
- gap:var(--tds-radio-group-gap);
1131
- padding:0;
1132
- margin:0;
1133
-
1134
- font-size:var(--tds-radio-group-font-size);
1135
- line-height:var(--tds-radio-group-line-height);
1136
- border:0;
1137
- }
1138
-
1139
- .tds-radio-group legend{
1140
- padding:0;
1141
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1142
- }
1143
-
1144
- .tds-radio-group:has(.tds-radio-group-description){
1145
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1146
- }
1147
-
1148
- .tds-radio-group[aria-invalid="true"]{
1149
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1150
- --tds-radio-group-description-invalid-icon-display:inline-block;
1151
- }
1152
-
1153
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1154
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1155
- }
1156
-
1157
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1158
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1159
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1160
- }
1161
-
1162
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1163
- --tds-radio-input-background-color:var(--t-form-background-color);
1164
- }
1165
-
1166
- .tds-radio-group:has(input:required) legend::after{
1167
- margin-left:.25ch;
1168
- color:var(--t-text-color-status-error);
1169
- content:"*";
1170
- }
1171
-
1172
- .tds-radio-group-fields{
1173
- display:flex;
1174
- flex-direction:column;
1175
- gap:var(--tds-radio-group-gap);
1176
- align-items:flex-start;
1177
- }
1178
-
1179
- .tds-radio-group-description{
1180
- display:flex;
1181
- gap:var(--t-spacing-half);
1182
- align-items:flex-start;
1183
- margin:0;
1184
- font-size:var(--tds-radio-group-description-font-size);
1185
- line-height:var(--tds-radio-group-description-line-height);
1186
- color:var(--tds-radio-group-description-color);
1187
- cursor:text;
1188
- }
1189
-
1190
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1191
- display:var(--tds-radio-group-description-invalid-icon-display);
1192
- flex-shrink:0;
1193
- margin-top:calc(.5lh - .5em);
1194
- line-height:var(--tds-radio-group-description-line-height);
1195
- }
1196
-
1197
- .tds-radio-group--sm{
1198
- --tds-radio-group-line-height:1.35;
1199
- --tds-radio-group-font-size:var(--t-font-size-sm);
1200
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1201
- --tds-radio-group-description-line-height:1.3;
1202
- }
1203
-
1204
- .tds-input:has(textarea){
1205
- --tds-input-padding-block:6px;
1206
- --tds-input-resizer-size:var(--t-element-size-sm);
1207
- --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");
1208
- }
1209
-
1210
- @supports (x: attr(x type(*))){
1211
-
1212
- .tds-input:has(textarea){
1213
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1214
- }
1215
- }
1216
-
1217
- .tds-input.tds-textarea--resize-vertical textarea{
1218
- resize:vertical;
1219
- }
1220
-
1221
- .tds-input.tds-textarea--resize-none textarea{
1222
- resize:none;
1223
- }
1224
-
1225
- .tds-input.tds-textarea--resize-auto textarea{
1226
- resize:vertical;
1227
- }
1228
-
1229
- @supports (field-sizing: content){
1230
- .tds-input.tds-textarea--resize-auto textarea{
1231
- field-sizing:content;
1232
- resize:none;
1233
- }
1234
- }
1235
-
1236
- .tds-input textarea{
1237
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1238
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1239
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1240
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1241
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1242
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1243
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1244
- --tds-input-scrollbar-thumb-border-radius:999px;
1245
- --tds-input-scrollbar-thumb-border-width:3px;
1246
- --tds-input-scrollbar-track-margin-block:.125rem;
1247
- scrollbar-color:initial;
1248
- transition-timing-function:var(--t-ease-in-out);
1249
- transition-duration:var(--t-duration-200);
1250
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1251
- }
1252
-
1253
- @media (pointer: fine){
1254
- :is(.tds-input textarea)::-webkit-scrollbar{
1255
- width:12px;
1256
- height:12px;
1257
- cursor:default;
1258
- }
1259
-
1260
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1261
- cursor:default;
1262
- background:var(--tds-input-scrollbar-thumb-color);
1263
- background-clip:content-box;
1264
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1265
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1234
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1235
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1236
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1266
1237
  }
1267
1238
 
1268
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1269
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1239
+ :is(.tds-radio input[type="radio"]):focus-visible{
1240
+ outline:var(--t-focus-ring-outline);
1241
+ outline-offset:var(--t-focus-ring-offset);
1270
1242
  }
1271
1243
 
1272
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1273
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1244
+ :is(.tds-radio input[type="radio"]):disabled{
1245
+ pointer-events:none;
1274
1246
  }
1275
1247
 
1276
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1277
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1278
- }
1248
+ @media (prefers-reduced-motion: reduce){
1279
1249
 
1280
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1281
- background:var(--tds-input-scrollbar-surface-color);
1250
+ .tds-radio input[type="radio"]{
1251
+ --tds-radio-transition-property:none;
1252
+ }
1282
1253
  }
1283
1254
 
1284
- :is(.tds-input textarea)::-webkit-resizer{
1285
- background:var(--tds-input-resizer-icon) no-repeat;
1286
- background-position:right bottom;
1287
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1288
- }
1255
+ .tds-radio:has(input:checked){
1256
+ --tds-radio-input-background-color:var(--t-form-background-color);
1257
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1258
+ --tds-radio-input-border-width:4px;
1259
+ }
1289
1260
 
1290
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1291
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1292
- cursor:default;
1261
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1262
+ --tds-radio-input-background-color:var(--t-form-background-color);
1263
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1293
1264
  }
1294
1265
 
1295
- @supports (-moz-appearance: none){
1296
- :is(.tds-input textarea){
1297
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1298
- scrollbar-width:thin;
1299
- }
1266
+ .tds-radio:has(input:user-invalid){
1267
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1268
+ }
1300
1269
 
1301
- @media (hover){
1302
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1303
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1304
- }
1305
- }
1270
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1271
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1272
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1306
1273
  }
1274
+
1275
+ .tds-radio:has(input:disabled){
1276
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1277
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1278
+
1279
+ --tds-radio-label-color:var(--t-form-color-disabled);
1280
+ --tds-radio-description-color:var(--t-form-color-disabled);
1281
+ --tds-radio-cursor:not-allowed;
1307
1282
  }
1308
1283
 
1284
+ .tds-radio:has(input:disabled) input:checked{
1285
+ --tds-radio-input-background-color:var(--t-form-background-color);
1286
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1287
+ }
1288
+
1289
+ .tds-radio-description{
1290
+ display:flex;
1291
+ grid-area:2 / 2;
1292
+ gap:var(--t-spacing-half);
1293
+ align-items:flex-start;
1294
+ margin:0;
1295
+ font-size:var(--tds-radio-description-font-size);
1296
+ line-height:var(--tds-radio-description-line-height);
1297
+ color:var(--tds-radio-description-color);
1298
+ cursor:text;
1299
+ }
1300
+
1301
+ .tds-radio--sm{
1302
+ --tds-radio-line-height:1.35;
1303
+ --tds-radio-input-size:var(--t-element-size-sm);
1304
+ --tds-radio-font-size:var(--t-font-size-sm);
1305
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1306
+ --tds-radio-description-line-height:1.3;
1307
+ }
1308
+
1309
1309
  .tds-select{
1310
1310
  --tds-select-border-color:var(--t-form-border-color);
1311
1311
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -3321,19 +3321,97 @@ a[class="tds-btn"]{
3321
3321
  @media (prefers-color-scheme: dark){
3322
3322
  }
3323
3323
 
3324
- .tds-number-stepper{
3325
- --tds-number-stepper-border-color:var(--t-form-border-color);
3326
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3327
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3328
- --tds-number-stepper-background-color:var(--t-form-background-color);
3329
- --tds-number-stepper-color:var(--t-form-color);
3330
- --tds-number-stepper-font-size:var(--t-font-size-md);
3331
- --tds-number-stepper-min-height:var(--t-container-size-md);
3332
- --tds-number-stepper-padding-block:6px;
3333
- --tds-number-stepper-button-offset:4px;
3334
- --tds-number-stepper-button-gap:2px;
3335
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
3336
- --tds-number-stepper-description-invalid-icon-display:none;
3324
+ .tds-checkbox-group{
3325
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3326
+ --tds-checkbox-group-line-height:1.4;
3327
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3328
+
3329
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3330
+
3331
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3332
+ --tds-checkbox-group-description-line-height:1.35;
3333
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3334
+ --tds-checkbox-group-description-invalid-icon-display:none;
3335
+ display:flex;
3336
+ flex-direction:column;
3337
+ gap:var(--tds-checkbox-group-gap);
3338
+ padding:0;
3339
+ margin:0;
3340
+
3341
+ font-size:var(--tds-checkbox-group-font-size);
3342
+ line-height:var(--tds-checkbox-group-line-height);
3343
+ border:0;
3344
+ }
3345
+
3346
+ .tds-checkbox-group legend{
3347
+ padding:0;
3348
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3349
+ }
3350
+
3351
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3352
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3353
+ }
3354
+
3355
+ .tds-checkbox-group[aria-invalid="true"]{
3356
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3357
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3358
+ }
3359
+
3360
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3361
+ margin-left:.25ch;
3362
+ color:var(--t-text-color-status-error);
3363
+ content:"*";
3364
+ }
3365
+
3366
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3367
+ content:none;
3368
+ }
3369
+
3370
+ .tds-checkbox-group-fields{
3371
+ display:flex;
3372
+ flex-direction:column;
3373
+ gap:var(--tds-checkbox-group-gap);
3374
+ align-items:flex-start;
3375
+ }
3376
+
3377
+ .tds-checkbox-group-description{
3378
+ display:flex;
3379
+ gap:var(--t-spacing-half);
3380
+ align-items:flex-start;
3381
+ margin:0;
3382
+ font-size:var(--tds-checkbox-group-description-font-size);
3383
+ line-height:var(--tds-checkbox-group-description-line-height);
3384
+ color:var(--tds-checkbox-group-description-color);
3385
+ cursor:text;
3386
+ }
3387
+
3388
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3389
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3390
+ flex-shrink:0;
3391
+ margin-top:calc(.5lh - .5em);
3392
+ line-height:var(--tds-checkbox-group-description-line-height);
3393
+ }
3394
+
3395
+ .tds-checkbox-group--sm{
3396
+ --tds-checkbox-group-line-height:1.35;
3397
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3398
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3399
+ --tds-checkbox-group-description-line-height:1.3;
3400
+ }
3401
+
3402
+ .tds-combo-box{
3403
+ --tds-combo-box-border-color:var(--t-form-border-color);
3404
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3405
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3406
+ --tds-combo-box-background-color:var(--t-form-background-color);
3407
+ --tds-combo-box-color:var(--t-form-color);
3408
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3409
+ --tds-combo-box-font-size:var(--t-font-size-md);
3410
+ --tds-combo-box-min-height:var(--t-container-size-md);
3411
+ --tds-combo-box-padding-block:6px;
3412
+ --tds-combo-box-button-offset:4px;
3413
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
3414
+ --tds-combo-box-description-invalid-icon-display:none;
3337
3415
 
3338
3416
  position:relative;
3339
3417
  display:flex;
@@ -3341,95 +3419,97 @@ a[class="tds-btn"]{
3341
3419
  gap:var(--t-spacing-half);
3342
3420
  }
3343
3421
 
3344
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3422
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
3345
3423
  margin-left:.25ch;
3346
3424
  color:var(--t-text-color-status-error);
3347
3425
  content:"*";
3348
3426
  }
3349
3427
 
3350
- .tds-number-stepper[data-invalid]{
3351
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
3352
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3353
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3354
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
3355
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
3356
- --tds-number-stepper-description-invalid-icon-display:inline-block;
3428
+ .tds-combo-box[data-invalid]{
3429
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
3430
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3431
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3432
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
3433
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
3434
+ --tds-combo-box-description-invalid-icon-display:inline-block;
3357
3435
  }
3358
3436
 
3359
- .tds-number-stepper[data-disabled]{
3360
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3361
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3362
- --tds-number-stepper-color:var(--t-form-color-disabled);
3437
+ .tds-combo-box[data-disabled]{
3438
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3439
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3440
+ --tds-combo-box-color:var(--t-form-color-disabled);
3363
3441
  }
3364
3442
 
3365
- .tds-number-stepper[data-disabled] .tds-number-stepper-label{
3443
+ .tds-combo-box[data-disabled] .tds-combo-box-label{
3366
3444
  color:var(--t-form-color-disabled);
3367
3445
  }
3368
3446
 
3369
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3447
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
3370
3448
  cursor:not-allowed;
3371
3449
  }
3372
3450
 
3373
- .tds-number-stepper--lg{
3374
- --tds-number-stepper-min-height:var(--t-container-size-lg);
3375
- --tds-number-stepper-font-size:var(--t-font-size-lg);
3376
- --tds-number-stepper-button-offset:5px;
3377
- --tds-number-stepper-button-gap:4px;
3451
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
3452
+ transform:rotate(.5turn);
3453
+ }
3454
+
3455
+ .tds-combo-box--lg{
3456
+ --tds-combo-box-min-height:var(--t-container-size-lg);
3457
+ --tds-combo-box-font-size:var(--t-font-size-lg);
3458
+ --tds-combo-box-button-offset:5px;
3378
3459
  }
3379
3460
 
3380
- .tds-number-stepper-label{
3461
+ .tds-combo-box-label{
3381
3462
  font-size:var(--t-font-size-md);
3382
3463
  font-weight:var(--t-font-weight-normal);
3383
3464
  color:var(--t-text-color);
3384
3465
  cursor:default;
3385
3466
  }
3386
3467
 
3387
- .tds-number-stepper-field{
3468
+ .tds-combo-box-field{
3388
3469
  display:flex;
3389
- gap:var(--tds-number-stepper-button-gap);
3390
3470
  align-items:center;
3391
3471
  inline-size:100%;
3392
- min-block-size:var(--tds-number-stepper-min-height);
3472
+ min-block-size:var(--tds-combo-box-min-height);
3393
3473
  font-family:inherit;
3394
- font-size:var(--tds-number-stepper-font-size);
3474
+ font-size:var(--tds-combo-box-font-size);
3395
3475
  line-height:1;
3396
- color:var(--tds-number-stepper-color);
3476
+ color:var(--tds-combo-box-color);
3397
3477
  -webkit-appearance:none;
3398
3478
  -moz-appearance:none;
3399
3479
  appearance:none;
3400
3480
  cursor:default;
3401
3481
  outline:var(--t-focus-ring-width) solid transparent;
3402
3482
  outline-offset:0;
3403
- background-color:var(--tds-number-stepper-background-color);
3404
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3483
+ background-color:var(--tds-combo-box-background-color);
3484
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3405
3485
  border-radius:var(--t-form-border-radius);
3406
3486
  }
3407
3487
 
3408
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3409
- border-color:var(--tds-number-stepper-border-color-hover);
3488
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3489
+ border-color:var(--tds-combo-box-border-color-hover);
3410
3490
  }
3411
3491
 
3412
- .tds-number-stepper-field[data-focus-within]{
3492
+ .tds-combo-box-field[data-focus-within]{
3413
3493
  outline-color:var(--t-focus-ring-color);
3414
3494
  outline-offset:var(--t-focus-ring-offset);
3415
- border-color:var(--tds-number-stepper-border-color-active);
3495
+ border-color:var(--tds-combo-box-border-color-active);
3416
3496
  }
3417
3497
 
3418
- .tds-number-stepper-field:has([readonly]){
3419
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3498
+ .tds-combo-box-field:has([readonly]){
3499
+ --tds-input-border-color:var(--t-form-border-color-readonly);
3500
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3420
3501
  }
3421
3502
 
3422
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
3503
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
3423
3504
  border-color:var(--t-form-border-color-hover);
3424
3505
  }
3425
3506
 
3426
- .tds-number-stepper-input{
3507
+ .tds-combo-box-input{
3427
3508
  display:flex;
3428
3509
  flex:1;
3429
3510
  align-items:center;
3430
- min-inline-size:0;
3431
- padding-block:var(--tds-number-stepper-padding-block);
3432
- padding-inline:var(--t-spacing-1);
3511
+ padding-block:var(--tds-combo-box-padding-block);
3512
+ padding-inline-start:var(--t-spacing-1);
3433
3513
  font-family:inherit;
3434
3514
  font-size:inherit;
3435
3515
  color:inherit;
@@ -3438,55 +3518,182 @@ a[class="tds-btn"]{
3438
3518
  border:0;
3439
3519
  }
3440
3520
 
3441
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3442
- margin:0;
3443
- -webkit-appearance:none;
3444
- appearance:none;
3521
+ .tds-combo-box-input::-moz-placeholder{
3522
+ color:var(--tds-combo-box-placeholder-color);
3523
+ -moz-user-select:none;
3524
+ user-select:none;
3445
3525
  }
3446
3526
 
3447
- .tds-number-stepper-button{
3527
+ .tds-combo-box-input::placeholder{
3528
+ color:var(--tds-combo-box-placeholder-color);
3529
+ -webkit-user-select:none;
3530
+ -moz-user-select:none;
3531
+ user-select:none;
3532
+ }
3533
+
3534
+ .tds-combo-box-button{
3448
3535
  flex-shrink:0;
3449
3536
  align-self:center;
3450
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3451
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3537
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3538
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3452
3539
  padding:0;
3540
+ margin-inline-end:var(--tds-combo-box-button-offset);
3453
3541
  }
3454
3542
 
3455
- .tds-number-stepper-button:last-of-type{
3456
- margin-inline-end:var(--tds-number-stepper-button-offset);
3543
+ .tds-combo-box-button > svg{
3544
+ inline-size:var(--tds-combo-box-font-size);
3545
+ block-size:var(--tds-combo-box-font-size);
3546
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
3457
3547
  }
3458
3548
 
3459
- .tds-number-stepper-description{
3549
+ .tds-combo-box-button:not(.tds-btn){
3550
+ display:inline-flex;
3551
+ align-items:center;
3552
+ justify-content:center;
3553
+ inline-size:auto;
3554
+ block-size:auto;
3555
+ margin-inline-end:.75em;
3556
+ color:var(--t-icon-color);
3557
+ cursor:default;
3558
+ background:transparent;
3559
+ border:0;
3560
+ }
3561
+
3562
+ .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3563
+ outline:0;
3564
+ }
3565
+
3566
+ .tds-combo-box-popover{
3567
+ width:var(--trigger-width);
3568
+ max-block-size:inherit;
3569
+ padding:var(--t-spacing-1);
3570
+ overflow:auto;
3571
+ outline:0;
3572
+ scrollbar-color:#0004 #0000;
3573
+ scrollbar-width:thin;
3574
+ background:var(--t-surface-color-card);
3575
+ background-clip:padding-box;
3576
+ border:1px solid var(--t-border-color);
3577
+ border-radius:var(--t-border-radius);
3578
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3579
+ }
3580
+
3581
+ .tds-combo-box-popover[data-entering]{
3582
+ animation:tds-combo-box-popover-enter 160ms ease;
3583
+ }
3584
+
3585
+ .tds-combo-box-popover[data-exiting]{
3586
+ animation:tds-combo-box-popover-exit 130ms ease;
3587
+ }
3588
+
3589
+ @keyframes tds-combo-box-popover-enter{
3590
+ from{
3591
+ opacity:0;
3592
+ transform:translateY(-8px);
3593
+ }
3594
+ }
3595
+
3596
+ @keyframes tds-combo-box-popover-exit{
3597
+ to{
3598
+ opacity:0;
3599
+ transform:translateY(-8px);
3600
+ }
3601
+ }
3602
+
3603
+ @media (prefers-reduced-motion: reduce){
3604
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3605
+ animation:none;
3606
+ }
3607
+
3608
+ .tds-combo-box-button > svg{
3609
+ transition:none;
3610
+ }
3611
+ }
3612
+
3613
+ .tds-combo-box-list{
3614
+ padding:0;
3615
+ margin:0;
3616
+ }
3617
+
3618
+ .tds-combo-box-list-item{
3619
+ display:block;
3620
+ padding-block:var(--t-spacing-1);
3621
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3622
+ overflow:hidden;
3623
+ text-overflow:ellipsis;
3624
+ font-size:1rem;
3625
+ color:var(--t-text-color);
3626
+ white-space:nowrap;
3627
+ cursor:default;
3628
+ outline-offset:-1px;
3629
+ border-radius:var(--t-border-radius);
3630
+ }
3631
+
3632
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3633
+ background:var(--t-fill-color-neutral-070);
3634
+ }
3635
+
3636
+ .tds-combo-box-list-item[data-selected]{
3637
+ background:var(--t-fill-color-button-interaction-ghost-active);
3638
+ }
3639
+
3640
+ .tds-combo-box-list-item[data-focus-visible]{
3641
+ outline:var(--t-focus-ring-outline);
3642
+ outline-offset:-1px;
3643
+ }
3644
+
3645
+ .tds-combo-box-list-item[data-disabled]{
3646
+ color:var(--t-form-color-disabled);
3647
+ cursor:not-allowed;
3648
+ }
3649
+
3650
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3651
+ background:transparent;
3652
+ }
3653
+
3654
+ .tds-combo-box-list-section:not(:first-child){
3655
+ margin-block-start:var(--t-spacing-half);
3656
+ }
3657
+
3658
+ .tds-combo-box-section-header{
3659
+ padding-block:var(--t-spacing-1);
3660
+ padding-inline:var(--t-spacing-1);
3661
+ font-size:var(--t-font-size-sm);
3662
+ font-weight:var(--t-font-weight-semibold);
3663
+ color:var(--t-text-color-secondary);
3664
+ }
3665
+
3666
+ .tds-combo-box-description{
3460
3667
  display:flex;
3461
3668
  gap:var(--t-spacing-half);
3462
3669
  align-items:flex-start;
3463
3670
  margin:0;
3464
3671
  font-size:var(--t-font-size-sm);
3465
3672
  line-height:1.35;
3466
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3673
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3467
3674
  cursor:text;
3468
3675
  }
3469
3676
 
3470
- .tds-number-stepper-description-invalid-icon{
3471
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
3677
+ .tds-combo-box-description-invalid-icon{
3678
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3472
3679
  flex-shrink:0;
3473
3680
  margin-block-start:calc(.5lh - .5em);
3474
3681
  line-height:1.35;
3475
3682
  }
3476
3683
 
3477
- .tds-combo-box{
3478
- --tds-combo-box-border-color:var(--t-form-border-color);
3479
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3480
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3481
- --tds-combo-box-background-color:var(--t-form-background-color);
3482
- --tds-combo-box-color:var(--t-form-color);
3483
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3484
- --tds-combo-box-font-size:var(--t-font-size-md);
3485
- --tds-combo-box-min-height:var(--t-container-size-md);
3486
- --tds-combo-box-padding-block:6px;
3487
- --tds-combo-box-button-offset:4px;
3488
- --tds-combo-box-description-color:var(--t-text-color-secondary);
3489
- --tds-combo-box-description-invalid-icon-display:none;
3684
+ .tds-date-picker{
3685
+ --tds-date-picker-border-color:var(--t-form-border-color);
3686
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3687
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3688
+ --tds-date-picker-background-color:var(--t-form-background-color);
3689
+ --tds-date-picker-color:var(--t-form-color);
3690
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3691
+ --tds-date-picker-font-size:var(--t-font-size-md);
3692
+ --tds-date-picker-min-height:var(--t-container-size-md);
3693
+ --tds-date-picker-padding-block:6px;
3694
+ --tds-date-picker-button-offset:4px;
3695
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3696
+ --tds-date-picker-description-invalid-icon-display:none;
3490
3697
 
3491
3698
  position:relative;
3492
3699
  display:flex;
@@ -3494,181 +3701,170 @@ a[class="tds-btn"]{
3494
3701
  gap:var(--t-spacing-half);
3495
3702
  }
3496
3703
 
3497
- .tds-combo-box[data-required] .tds-combo-box-label::after{
3704
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3498
3705
  margin-left:.25ch;
3499
3706
  color:var(--t-text-color-status-error);
3500
3707
  content:"*";
3501
3708
  }
3502
3709
 
3503
- .tds-combo-box[data-invalid]{
3504
- --tds-combo-box-border-color:var(--t-form-border-color-error);
3505
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3506
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3507
- --tds-combo-box-background-color:var(--t-form-background-color-error);
3508
- --tds-combo-box-description-color:var(--t-text-color-status-error);
3509
- --tds-combo-box-description-invalid-icon-display:inline-block;
3710
+ .tds-date-picker[data-invalid]{
3711
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
3712
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3713
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3714
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
3715
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
3716
+ --tds-date-picker-description-invalid-icon-display:inline-block;
3510
3717
  }
3511
3718
 
3512
- .tds-combo-box[data-disabled]{
3513
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3514
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3515
- --tds-combo-box-color:var(--t-form-color-disabled);
3719
+ .tds-date-picker[data-disabled]{
3720
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3721
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3722
+ --tds-date-picker-color:var(--t-form-color-disabled);
3723
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3516
3724
  }
3517
3725
 
3518
- .tds-combo-box[data-disabled] .tds-combo-box-label{
3519
- color:var(--t-form-color-disabled);
3520
- }
3521
-
3522
- .tds-combo-box[data-disabled] .tds-combo-box-field{
3726
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3523
3727
  cursor:not-allowed;
3524
3728
  }
3525
3729
 
3526
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
3527
- transform:rotate(.5turn);
3528
- }
3529
-
3530
- .tds-combo-box--lg{
3531
- --tds-combo-box-min-height:var(--t-container-size-lg);
3532
- --tds-combo-box-font-size:var(--t-font-size-lg);
3533
- --tds-combo-box-button-offset:5px;
3730
+ .tds-date-picker--lg{
3731
+ --tds-date-picker-min-height:var(--t-container-size-lg);
3732
+ --tds-date-picker-font-size:var(--t-font-size-lg);
3733
+ --tds-date-picker-button-offset:5px;
3534
3734
  }
3535
3735
 
3536
- .tds-combo-box-label{
3736
+ .tds-date-picker-label{
3537
3737
  font-size:var(--t-font-size-md);
3538
3738
  font-weight:var(--t-font-weight-normal);
3539
3739
  color:var(--t-text-color);
3540
3740
  cursor:default;
3541
3741
  }
3542
3742
 
3543
- .tds-combo-box-field{
3743
+ .tds-date-picker-field{
3544
3744
  display:flex;
3545
3745
  align-items:center;
3546
3746
  inline-size:100%;
3547
- min-block-size:var(--tds-combo-box-min-height);
3747
+ min-block-size:var(--tds-date-picker-min-height);
3548
3748
  font-family:inherit;
3549
- font-size:var(--tds-combo-box-font-size);
3749
+ font-size:var(--tds-date-picker-font-size);
3550
3750
  line-height:1;
3551
- color:var(--tds-combo-box-color);
3751
+ color:var(--tds-date-picker-color);
3552
3752
  -webkit-appearance:none;
3553
3753
  -moz-appearance:none;
3554
3754
  appearance:none;
3555
- cursor:default;
3755
+ cursor:text;
3556
3756
  outline:var(--t-focus-ring-width) solid transparent;
3557
3757
  outline-offset:0;
3558
- background-color:var(--tds-combo-box-background-color);
3559
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3758
+ background-color:var(--tds-date-picker-background-color);
3759
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3560
3760
  border-radius:var(--t-form-border-radius);
3561
3761
  }
3562
3762
 
3563
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3564
- border-color:var(--tds-combo-box-border-color-hover);
3763
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3764
+ border-color:var(--tds-date-picker-border-color-hover);
3565
3765
  }
3566
3766
 
3567
- .tds-combo-box-field[data-focus-within]{
3767
+ .tds-date-picker-field[data-focus-within]{
3568
3768
  outline-color:var(--t-focus-ring-color);
3569
3769
  outline-offset:var(--t-focus-ring-offset);
3570
- border-color:var(--tds-combo-box-border-color-active);
3770
+ border-color:var(--tds-date-picker-border-color-active);
3571
3771
  }
3572
3772
 
3573
- .tds-combo-box-field:has([readonly]){
3574
- --tds-input-border-color:var(--t-form-border-color-readonly);
3575
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3773
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3774
+ color:var(--t-form-color-readonly);
3775
+ background-color:var(--t-form-background-color-readonly);
3776
+ border-color:var(--t-form-border-color-readonly);
3576
3777
  }
3577
3778
 
3578
- .tds-combo-box-field[data-focus-within]:has([readonly]){
3779
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3780
+ border-color:var(--t-form-border-color-readonly);
3781
+ }
3782
+
3783
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3784
+ outline-color:var(--t-focus-ring-color);
3785
+ outline-offset:var(--t-focus-ring-offset);
3579
3786
  border-color:var(--t-form-border-color-hover);
3580
3787
  }
3581
3788
 
3582
- .tds-combo-box-input{
3583
- display:flex;
3789
+ .tds-date-picker-input{
3584
3790
  flex:1;
3585
- align-items:center;
3586
- padding-block:var(--tds-combo-box-padding-block);
3791
+ padding-block:var(--tds-date-picker-padding-block);
3587
3792
  padding-inline-start:var(--t-spacing-1);
3588
- font-family:inherit;
3589
- font-size:inherit;
3590
- color:inherit;
3591
- outline:0;
3592
- background:transparent;
3593
- border:0;
3793
+ font-variant-numeric:tabular-nums;
3594
3794
  }
3595
3795
 
3596
- .tds-combo-box-input::-moz-placeholder{
3597
- color:var(--tds-combo-box-placeholder-color);
3598
- -moz-user-select:none;
3599
- user-select:none;
3796
+ .tds-date-picker-segment{
3797
+ padding-inline:2px;
3798
+ caret-color:transparent;
3799
+ border-radius:var(--t-border-radius-sm);
3800
+ }
3801
+
3802
+ .tds-date-picker-segment[data-placeholder]{
3803
+ color:var(--tds-date-picker-placeholder-color);
3600
3804
  }
3601
3805
 
3602
- .tds-combo-box-input::placeholder{
3603
- color:var(--tds-combo-box-placeholder-color);
3604
- -webkit-user-select:none;
3605
- -moz-user-select:none;
3606
- user-select:none;
3806
+ .tds-date-picker-segment[data-focused]{
3807
+ color:var(--t-text-color-inverted);
3808
+ outline:0;
3809
+ background:var(--t-fill-color-interaction);
3607
3810
  }
3608
3811
 
3609
- .tds-combo-box-button{
3610
- flex-shrink:0;
3611
- align-self:center;
3612
- inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3613
- block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3614
- padding:0;
3615
- margin-inline-end:var(--tds-combo-box-button-offset);
3812
+ .tds-date-picker-segment-separator{
3813
+ padding-inline:0;
3814
+ color:var(--tds-date-picker-placeholder-color);
3616
3815
  }
3617
3816
 
3618
- .tds-combo-box-button > svg{
3619
- inline-size:var(--tds-combo-box-font-size);
3620
- block-size:var(--tds-combo-box-font-size);
3621
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
3622
- }
3817
+ .tds-date-picker-description{
3818
+ display:flex;
3819
+ gap:var(--t-spacing-half);
3820
+ align-items:flex-start;
3821
+ margin:0;
3822
+ font-size:var(--t-font-size-sm);
3823
+ line-height:1.35;
3824
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3825
+ cursor:text;
3826
+ }
3623
3827
 
3624
- .tds-combo-box-button:not(.tds-btn){
3625
- display:inline-flex;
3626
- align-items:center;
3627
- justify-content:center;
3628
- inline-size:auto;
3629
- block-size:auto;
3630
- margin-inline-end:.75em;
3631
- color:var(--t-icon-color);
3632
- cursor:default;
3633
- background:transparent;
3634
- border:0;
3828
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3829
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3830
+ flex-shrink:0;
3831
+ margin-block-start:calc(.5lh - .5em);
3832
+ line-height:1.35;
3635
3833
  }
3636
3834
 
3637
- .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3638
- outline:0;
3639
- }
3835
+ .tds-date-picker-button{
3836
+ flex-shrink:0;
3837
+ align-self:center;
3838
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3839
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3840
+ padding:0;
3841
+ margin-inline-end:var(--tds-date-picker-button-offset);
3842
+ }
3640
3843
 
3641
- .tds-combo-box-popover{
3642
- width:var(--trigger-width);
3643
- max-block-size:inherit;
3644
- padding:var(--t-spacing-1);
3645
- overflow:auto;
3646
- outline:0;
3647
- scrollbar-color:#0004 #0000;
3648
- scrollbar-width:thin;
3844
+ .tds-date-picker-popover{
3845
+ padding:var(--t-spacing-2);
3649
3846
  background:var(--t-surface-color-card);
3650
- background-clip:padding-box;
3651
3847
  border:1px solid var(--t-border-color);
3652
3848
  border-radius:var(--t-border-radius);
3653
3849
  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3654
3850
  }
3655
3851
 
3656
- .tds-combo-box-popover[data-entering]{
3657
- animation:tds-combo-box-popover-enter 160ms ease;
3852
+ .tds-date-picker-popover[data-entering]{
3853
+ animation:tds-date-picker-popover-enter 160ms ease;
3658
3854
  }
3659
3855
 
3660
- .tds-combo-box-popover[data-exiting]{
3661
- animation:tds-combo-box-popover-exit 130ms ease;
3856
+ .tds-date-picker-popover[data-exiting]{
3857
+ animation:tds-date-picker-popover-exit 130ms ease;
3662
3858
  }
3663
3859
 
3664
- @keyframes tds-combo-box-popover-enter{
3860
+ @keyframes tds-date-picker-popover-enter{
3665
3861
  from{
3666
3862
  opacity:0;
3667
3863
  transform:translateY(-8px);
3668
3864
  }
3669
3865
  }
3670
3866
 
3671
- @keyframes tds-combo-box-popover-exit{
3867
+ @keyframes tds-date-picker-popover-exit{
3672
3868
  to{
3673
3869
  opacity:0;
3674
3870
  transform:translateY(-8px);
@@ -3676,176 +3872,133 @@ a[class="tds-btn"]{
3676
3872
  }
3677
3873
 
3678
3874
  @media (prefers-reduced-motion: reduce){
3679
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3875
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3680
3876
  animation:none;
3681
3877
  }
3878
+ }
3682
3879
 
3683
- .tds-combo-box-button > svg{
3684
- transition:none;
3685
- }
3880
+ .tds-date-picker-calendar{
3881
+ inline-size:-moz-fit-content;
3882
+ inline-size:fit-content;
3686
3883
  }
3687
3884
 
3688
- .tds-combo-box-list{
3689
- padding:0;
3885
+ .tds-date-picker-calendar-header{
3886
+ display:flex;
3887
+ align-items:center;
3888
+ justify-content:space-between;
3889
+ padding-block-end:var(--t-spacing-1);
3890
+ }
3891
+
3892
+ .tds-date-picker-calendar-title{
3893
+ flex:1;
3690
3894
  margin:0;
3895
+ font-size:var(--t-font-size-md);
3896
+ font-weight:var(--t-font-weight-semibold);
3897
+ text-align:center;
3691
3898
  }
3692
3899
 
3693
- .tds-combo-box-list-item{
3694
- display:block;
3695
- padding-block:var(--t-spacing-1);
3696
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3697
- overflow:hidden;
3698
- text-overflow:ellipsis;
3699
- font-size:1rem;
3900
+ .tds-date-picker-calendar-nav{
3901
+ display:flex;
3902
+ align-items:center;
3903
+ justify-content:center;
3904
+ padding:var(--t-spacing-half);
3700
3905
  color:var(--t-text-color);
3701
- white-space:nowrap;
3702
3906
  cursor:default;
3703
- outline-offset:-1px;
3704
- border-radius:var(--t-border-radius);
3907
+ outline:0;
3908
+ background:transparent;
3909
+ border:0;
3910
+ border-radius:var(--t-border-radius-sm);
3705
3911
  }
3706
3912
 
3707
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3913
+ .tds-date-picker-calendar-nav[data-hovered]{
3708
3914
  background:var(--t-fill-color-neutral-070);
3709
3915
  }
3710
3916
 
3711
- .tds-combo-box-list-item[data-selected]{
3917
+ .tds-date-picker-calendar-nav[data-pressed]{
3712
3918
  background:var(--t-fill-color-button-interaction-ghost-active);
3713
3919
  }
3714
3920
 
3715
- .tds-combo-box-list-item[data-focus-visible]{
3716
- outline:var(--t-focus-ring-outline);
3717
- outline-offset:-1px;
3921
+ .tds-date-picker-calendar-nav[data-focus-visible]{
3922
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3923
+ outline-offset:var(--t-focus-ring-offset);
3718
3924
  }
3719
3925
 
3720
- .tds-combo-box-list-item[data-disabled]{
3926
+ .tds-date-picker-calendar-nav[data-disabled]{
3721
3927
  color:var(--t-form-color-disabled);
3722
3928
  cursor:not-allowed;
3723
3929
  }
3724
3930
 
3725
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3726
- background:transparent;
3727
- }
3728
-
3729
- .tds-combo-box-list-section:not(:first-child){
3730
- margin-block-start:var(--t-spacing-half);
3731
- }
3732
-
3733
- .tds-combo-box-section-header{
3734
- padding-block:var(--t-spacing-1);
3735
- padding-inline:var(--t-spacing-1);
3736
- font-size:var(--t-font-size-sm);
3737
- font-weight:var(--t-font-weight-semibold);
3738
- color:var(--t-text-color-secondary);
3931
+ .tds-date-picker-calendar-grid{
3932
+ border-collapse:collapse;
3739
3933
  }
3740
3934
 
3741
- .tds-combo-box-description{
3742
- display:flex;
3743
- gap:var(--t-spacing-half);
3744
- align-items:flex-start;
3745
- margin:0;
3935
+ .tds-date-picker-calendar-header-cell{
3936
+ padding-block:var(--t-spacing-half);
3746
3937
  font-size:var(--t-font-size-sm);
3747
- line-height:1.35;
3748
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3749
- cursor:text;
3750
- }
3751
-
3752
- .tds-combo-box-description-invalid-icon{
3753
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3754
- flex-shrink:0;
3755
- margin-block-start:calc(.5lh - .5em);
3756
- line-height:1.35;
3938
+ font-weight:var(--t-font-weight-normal);
3939
+ color:var(--t-text-color-secondary);
3940
+ text-align:center;
3757
3941
  }
3758
3942
 
3759
- .tds-checkbox-group{
3760
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3761
- --tds-checkbox-group-line-height:1.4;
3762
- --tds-checkbox-group-gap:var(--t-spacing-1);
3763
-
3764
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3765
-
3766
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3767
- --tds-checkbox-group-description-line-height:1.35;
3768
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3769
- --tds-checkbox-group-description-invalid-icon-display:none;
3943
+ .tds-date-picker-calendar-cell{
3770
3944
  display:flex;
3771
- flex-direction:column;
3772
- gap:var(--tds-checkbox-group-gap);
3773
- padding:0;
3774
- margin:0;
3775
-
3776
- font-size:var(--tds-checkbox-group-font-size);
3777
- line-height:var(--tds-checkbox-group-line-height);
3778
- border:0;
3945
+ align-items:center;
3946
+ justify-content:center;
3947
+ inline-size:2.25rem;
3948
+ block-size:2.25rem;
3949
+ font-size:var(--t-font-size-md);
3950
+ color:var(--t-text-color);
3951
+ cursor:default;
3952
+ outline:0;
3953
+ border-radius:var(--t-border-radius-sm);
3779
3954
  }
3780
3955
 
3781
- .tds-checkbox-group legend{
3782
- padding:0;
3783
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3784
- }
3785
-
3786
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3787
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3956
+ .tds-date-picker-calendar-cell[data-hovered]{
3957
+ background:var(--t-fill-color-neutral-070);
3788
3958
  }
3789
3959
 
3790
- .tds-checkbox-group[aria-invalid="true"]{
3791
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3792
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3960
+ .tds-date-picker-calendar-cell[data-pressed]{
3961
+ background:var(--t-fill-color-button-interaction-ghost-active);
3793
3962
  }
3794
3963
 
3795
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3796
- margin-left:.25ch;
3797
- color:var(--t-text-color-status-error);
3798
- content:"*";
3799
- }
3800
-
3801
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3802
- content:none;
3803
- }
3964
+ .tds-date-picker-calendar-cell[data-selected]{
3965
+ color:var(--t-text-color-inverted);
3966
+ background:var(--t-fill-color-interaction);
3967
+ }
3804
3968
 
3805
- .tds-checkbox-group-fields{
3806
- display:flex;
3807
- flex-direction:column;
3808
- gap:var(--tds-checkbox-group-gap);
3809
- align-items:flex-start;
3810
- }
3969
+ .tds-date-picker-calendar-cell[data-focus-visible]{
3970
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3971
+ outline-offset:var(--t-focus-ring-offset);
3972
+ }
3811
3973
 
3812
- .tds-checkbox-group-description{
3813
- display:flex;
3814
- gap:var(--t-spacing-half);
3815
- align-items:flex-start;
3816
- margin:0;
3817
- font-size:var(--tds-checkbox-group-description-font-size);
3818
- line-height:var(--tds-checkbox-group-description-line-height);
3819
- color:var(--tds-checkbox-group-description-color);
3820
- cursor:text;
3821
- }
3974
+ .tds-date-picker-calendar-cell[data-unavailable]{
3975
+ color:var(--t-text-color-secondary);
3976
+ text-decoration:line-through;
3977
+ cursor:not-allowed;
3978
+ }
3822
3979
 
3823
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3824
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3825
- flex-shrink:0;
3826
- margin-top:calc(.5lh - .5em);
3827
- line-height:var(--tds-checkbox-group-description-line-height);
3980
+ .tds-date-picker-calendar-cell[data-disabled]{
3981
+ color:var(--t-form-color-disabled);
3982
+ cursor:not-allowed;
3828
3983
  }
3829
3984
 
3830
- .tds-checkbox-group--sm{
3831
- --tds-checkbox-group-line-height:1.35;
3832
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3833
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3834
- --tds-checkbox-group-description-line-height:1.3;
3835
- }
3985
+ .tds-date-picker-calendar-cell[data-outside-month]{
3986
+ color:var(--t-text-color-secondary);
3987
+ }
3836
3988
 
3837
- .tds-time-field{
3838
- --tds-time-field-border-color:var(--t-form-border-color);
3839
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3840
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3841
- --tds-time-field-background-color:var(--t-form-background-color);
3842
- --tds-time-field-color:var(--t-form-color);
3843
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3844
- --tds-time-field-font-size:var(--t-font-size-md);
3845
- --tds-time-field-min-height:var(--t-container-size-md);
3846
- --tds-time-field-padding-block:6px;
3847
- --tds-time-field-description-color:var(--t-text-color-secondary);
3848
- --tds-time-field-description-invalid-icon-display:none;
3989
+ .tds-number-stepper{
3990
+ --tds-number-stepper-border-color:var(--t-form-border-color);
3991
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3992
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3993
+ --tds-number-stepper-background-color:var(--t-form-background-color);
3994
+ --tds-number-stepper-color:var(--t-form-color);
3995
+ --tds-number-stepper-font-size:var(--t-font-size-md);
3996
+ --tds-number-stepper-min-height:var(--t-container-size-md);
3997
+ --tds-number-stepper-padding-block:6px;
3998
+ --tds-number-stepper-button-offset:4px;
3999
+ --tds-number-stepper-button-gap:2px;
4000
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
4001
+ --tds-number-stepper-description-invalid-icon-display:none;
3849
4002
 
3850
4003
  position:relative;
3851
4004
  display:flex;
@@ -3853,148 +4006,151 @@ a[class="tds-btn"]{
3853
4006
  gap:var(--t-spacing-half);
3854
4007
  }
3855
4008
 
3856
- .tds-time-field[data-required] .tds-time-field-label::after{
4009
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3857
4010
  margin-left:.25ch;
3858
4011
  color:var(--t-text-color-status-error);
3859
4012
  content:"*";
3860
4013
  }
3861
4014
 
3862
- .tds-time-field[data-invalid]{
3863
- --tds-time-field-border-color:var(--t-form-border-color-error);
3864
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3865
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3866
- --tds-time-field-background-color:var(--t-form-background-color-error);
3867
- --tds-time-field-description-color:var(--t-text-color-status-error);
3868
- --tds-time-field-description-invalid-icon-display:inline-block;
4015
+ .tds-number-stepper[data-invalid]{
4016
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
4017
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
4018
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
4019
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
4020
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
4021
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
3869
4022
  }
3870
4023
 
3871
- .tds-time-field[data-disabled]{
3872
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3873
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3874
- --tds-time-field-color:var(--t-form-color-disabled);
3875
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4024
+ .tds-number-stepper[data-disabled]{
4025
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
4026
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
4027
+ --tds-number-stepper-color:var(--t-form-color-disabled);
3876
4028
  }
3877
4029
 
3878
- .tds-time-field[data-disabled] .tds-time-field-label{
4030
+ .tds-number-stepper[data-disabled] .tds-number-stepper-label{
3879
4031
  color:var(--t-form-color-disabled);
3880
4032
  }
3881
4033
 
3882
- .tds-time-field[data-disabled] .tds-time-field-input{
4034
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3883
4035
  cursor:not-allowed;
3884
4036
  }
3885
4037
 
3886
- .tds-time-field--lg{
3887
- --tds-time-field-min-height:var(--t-container-size-lg);
3888
- --tds-time-field-font-size:var(--t-font-size-lg);
4038
+ .tds-number-stepper--lg{
4039
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
4040
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
4041
+ --tds-number-stepper-button-offset:5px;
4042
+ --tds-number-stepper-button-gap:4px;
3889
4043
  }
3890
4044
 
3891
- .tds-time-field-label{
4045
+ .tds-number-stepper-label{
3892
4046
  font-size:var(--t-font-size-md);
3893
4047
  font-weight:var(--t-font-weight-normal);
3894
4048
  color:var(--t-text-color);
3895
4049
  cursor:default;
3896
4050
  }
3897
4051
 
3898
- .tds-time-field-input{
4052
+ .tds-number-stepper-field{
3899
4053
  display:flex;
4054
+ gap:var(--tds-number-stepper-button-gap);
3900
4055
  align-items:center;
3901
4056
  inline-size:100%;
3902
- min-block-size:var(--tds-time-field-min-height);
3903
- padding-block:var(--tds-time-field-padding-block);
3904
- padding-inline:var(--t-spacing-1);
4057
+ min-block-size:var(--tds-number-stepper-min-height);
3905
4058
  font-family:inherit;
3906
- font-size:var(--tds-time-field-font-size);
3907
- font-variant-numeric:tabular-nums;
4059
+ font-size:var(--tds-number-stepper-font-size);
3908
4060
  line-height:1;
3909
- color:var(--tds-time-field-color);
3910
- cursor:text;
4061
+ color:var(--tds-number-stepper-color);
4062
+ -webkit-appearance:none;
4063
+ -moz-appearance:none;
4064
+ appearance:none;
4065
+ cursor:default;
3911
4066
  outline:var(--t-focus-ring-width) solid transparent;
3912
4067
  outline-offset:0;
3913
- background-color:var(--tds-time-field-background-color);
3914
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4068
+ background-color:var(--tds-number-stepper-background-color);
4069
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3915
4070
  border-radius:var(--t-form-border-radius);
3916
4071
  }
3917
4072
 
3918
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3919
- border-color:var(--tds-time-field-border-color-hover);
4073
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4074
+ border-color:var(--tds-number-stepper-border-color-hover);
3920
4075
  }
3921
4076
 
3922
- .tds-time-field-input[data-focus-within]{
4077
+ .tds-number-stepper-field[data-focus-within]{
3923
4078
  outline-color:var(--t-focus-ring-color);
3924
4079
  outline-offset:var(--t-focus-ring-offset);
3925
- border-color:var(--tds-time-field-border-color-active);
4080
+ border-color:var(--tds-number-stepper-border-color-active);
3926
4081
  }
3927
4082
 
3928
- .tds-time-field-input[data-readonly]{
3929
- color:var(--t-form-color-readonly);
3930
- background-color:var(--t-form-background-color-readonly);
3931
- border-color:var(--t-form-border-color-readonly);
4083
+ .tds-number-stepper-field:has([readonly]){
4084
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3932
4085
  }
3933
4086
 
3934
- .tds-time-field-input[data-readonly][data-hovered]{
3935
- border-color:var(--t-form-border-color-readonly);
3936
- }
3937
-
3938
- .tds-time-field-input[data-readonly][data-focus-within]{
3939
- outline-color:var(--t-focus-ring-color);
3940
- outline-offset:var(--t-focus-ring-offset);
4087
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
3941
4088
  border-color:var(--t-form-border-color-hover);
3942
4089
  }
3943
4090
 
3944
- .tds-time-field-segment{
3945
- padding-inline:1px;
3946
- font-variant-numeric:tabular-nums;
3947
- cursor:text;
3948
- caret-color:transparent;
3949
- border-radius:var(--t-border-radius-sm);
4091
+ .tds-number-stepper-input{
4092
+ display:flex;
4093
+ flex:1;
4094
+ align-items:center;
4095
+ min-inline-size:0;
4096
+ padding-block:var(--tds-number-stepper-padding-block);
4097
+ padding-inline:var(--t-spacing-1);
4098
+ font-family:inherit;
4099
+ font-size:inherit;
4100
+ color:inherit;
4101
+ outline:0;
4102
+ background:transparent;
4103
+ border:0;
3950
4104
  }
3951
4105
 
3952
- .tds-time-field-segment[data-placeholder]{
3953
- color:var(--tds-time-field-placeholder-color);
3954
- }
3955
-
3956
- .tds-time-field-segment[data-focused]{
3957
- color:var(--t-text-color-inverted);
3958
- outline:0;
3959
- background:var(--t-fill-color-interaction);
4106
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4107
+ margin:0;
4108
+ -webkit-appearance:none;
4109
+ appearance:none;
3960
4110
  }
3961
4111
 
3962
- .tds-time-field-segment-separator{
3963
- padding-inline:0;
3964
- color:var(--tds-time-field-placeholder-color);
4112
+ .tds-number-stepper-button{
4113
+ flex-shrink:0;
4114
+ align-self:center;
4115
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4116
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4117
+ padding:0;
3965
4118
  }
3966
4119
 
3967
- .tds-time-field-description{
4120
+ .tds-number-stepper-button:last-of-type{
4121
+ margin-inline-end:var(--tds-number-stepper-button-offset);
4122
+ }
4123
+
4124
+ .tds-number-stepper-description{
3968
4125
  display:flex;
3969
4126
  gap:var(--t-spacing-half);
3970
4127
  align-items:flex-start;
3971
4128
  margin:0;
3972
4129
  font-size:var(--t-font-size-sm);
3973
4130
  line-height:1.35;
3974
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4131
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3975
4132
  cursor:text;
3976
4133
  }
3977
4134
 
3978
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3979
- display:var(--tds-time-field-description-invalid-icon-display, none);
3980
- flex-shrink:0;
3981
- margin-block-start:calc(.5lh - .5em);
3982
- line-height:1.35;
3983
- }
4135
+ .tds-number-stepper-description-invalid-icon{
4136
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
4137
+ flex-shrink:0;
4138
+ margin-block-start:calc(.5lh - .5em);
4139
+ line-height:1.35;
4140
+ }
3984
4141
 
3985
- .tds-date-picker{
3986
- --tds-date-picker-border-color:var(--t-form-border-color);
3987
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3988
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3989
- --tds-date-picker-background-color:var(--t-form-background-color);
3990
- --tds-date-picker-color:var(--t-form-color);
3991
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3992
- --tds-date-picker-font-size:var(--t-font-size-md);
3993
- --tds-date-picker-min-height:var(--t-container-size-md);
3994
- --tds-date-picker-padding-block:6px;
3995
- --tds-date-picker-button-offset:4px;
3996
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3997
- --tds-date-picker-description-invalid-icon-display:none;
4142
+ .tds-time-field{
4143
+ --tds-time-field-border-color:var(--t-form-border-color);
4144
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4145
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4146
+ --tds-time-field-background-color:var(--t-form-background-color);
4147
+ --tds-time-field-color:var(--t-form-color);
4148
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4149
+ --tds-time-field-font-size:var(--t-font-size-md);
4150
+ --tds-time-field-min-height:var(--t-container-size-md);
4151
+ --tds-time-field-padding-block:6px;
4152
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4153
+ --tds-time-field-description-invalid-icon-display:none;
3998
4154
 
3999
4155
  position:relative;
4000
4156
  display:flex;
@@ -4002,291 +4158,135 @@ a[class="tds-btn"]{
4002
4158
  gap:var(--t-spacing-half);
4003
4159
  }
4004
4160
 
4005
- .tds-date-picker[data-required] .tds-date-picker-label::after{
4161
+ .tds-time-field[data-required] .tds-time-field-label::after{
4006
4162
  margin-left:.25ch;
4007
4163
  color:var(--t-text-color-status-error);
4008
4164
  content:"*";
4009
4165
  }
4010
4166
 
4011
- .tds-date-picker[data-invalid]{
4012
- --tds-date-picker-border-color:var(--t-form-border-color-error);
4013
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
4014
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
4015
- --tds-date-picker-background-color:var(--t-form-background-color-error);
4016
- --tds-date-picker-description-color:var(--t-text-color-status-error);
4017
- --tds-date-picker-description-invalid-icon-display:inline-block;
4167
+ .tds-time-field[data-invalid]{
4168
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4169
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4170
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4171
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4172
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4173
+ --tds-time-field-description-invalid-icon-display:inline-block;
4018
4174
  }
4019
4175
 
4020
- .tds-date-picker[data-disabled]{
4021
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
4022
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
4023
- --tds-date-picker-color:var(--t-form-color-disabled);
4024
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
4176
+ .tds-time-field[data-disabled]{
4177
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4178
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4179
+ --tds-time-field-color:var(--t-form-color-disabled);
4180
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4025
4181
  }
4026
4182
 
4027
- .tds-date-picker[data-disabled] .tds-date-picker-field{
4183
+ .tds-time-field[data-disabled] .tds-time-field-label{
4184
+ color:var(--t-form-color-disabled);
4185
+ }
4186
+
4187
+ .tds-time-field[data-disabled] .tds-time-field-input{
4028
4188
  cursor:not-allowed;
4029
4189
  }
4030
4190
 
4031
- .tds-date-picker--lg{
4032
- --tds-date-picker-min-height:var(--t-container-size-lg);
4033
- --tds-date-picker-font-size:var(--t-font-size-lg);
4034
- --tds-date-picker-button-offset:5px;
4191
+ .tds-time-field--lg{
4192
+ --tds-time-field-min-height:var(--t-container-size-lg);
4193
+ --tds-time-field-font-size:var(--t-font-size-lg);
4035
4194
  }
4036
4195
 
4037
- .tds-date-picker-label{
4196
+ .tds-time-field-label{
4038
4197
  font-size:var(--t-font-size-md);
4039
4198
  font-weight:var(--t-font-weight-normal);
4040
4199
  color:var(--t-text-color);
4041
4200
  cursor:default;
4042
4201
  }
4043
4202
 
4044
- .tds-date-picker-field{
4203
+ .tds-time-field-input{
4045
4204
  display:flex;
4046
4205
  align-items:center;
4047
4206
  inline-size:100%;
4048
- min-block-size:var(--tds-date-picker-min-height);
4207
+ min-block-size:var(--tds-time-field-min-height);
4208
+ padding-block:var(--tds-time-field-padding-block);
4209
+ padding-inline:var(--t-spacing-1);
4049
4210
  font-family:inherit;
4050
- font-size:var(--tds-date-picker-font-size);
4211
+ font-size:var(--tds-time-field-font-size);
4212
+ font-variant-numeric:tabular-nums;
4051
4213
  line-height:1;
4052
- color:var(--tds-date-picker-color);
4053
- -webkit-appearance:none;
4054
- -moz-appearance:none;
4055
- appearance:none;
4214
+ color:var(--tds-time-field-color);
4056
4215
  cursor:text;
4057
4216
  outline:var(--t-focus-ring-width) solid transparent;
4058
4217
  outline-offset:0;
4059
- background-color:var(--tds-date-picker-background-color);
4060
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
4218
+ background-color:var(--tds-time-field-background-color);
4219
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4061
4220
  border-radius:var(--t-form-border-radius);
4062
4221
  }
4063
4222
 
4064
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4065
- border-color:var(--tds-date-picker-border-color-hover);
4223
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4224
+ border-color:var(--tds-time-field-border-color-hover);
4066
4225
  }
4067
4226
 
4068
- .tds-date-picker-field[data-focus-within]{
4227
+ .tds-time-field-input[data-focus-within]{
4069
4228
  outline-color:var(--t-focus-ring-color);
4070
4229
  outline-offset:var(--t-focus-ring-offset);
4071
- border-color:var(--tds-date-picker-border-color-active);
4230
+ border-color:var(--tds-time-field-border-color-active);
4072
4231
  }
4073
4232
 
4074
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
4233
+ .tds-time-field-input[data-readonly]{
4075
4234
  color:var(--t-form-color-readonly);
4076
4235
  background-color:var(--t-form-background-color-readonly);
4077
4236
  border-color:var(--t-form-border-color-readonly);
4078
4237
  }
4079
4238
 
4080
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
4239
+ .tds-time-field-input[data-readonly][data-hovered]{
4081
4240
  border-color:var(--t-form-border-color-readonly);
4082
4241
  }
4083
4242
 
4084
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4243
+ .tds-time-field-input[data-readonly][data-focus-within]{
4085
4244
  outline-color:var(--t-focus-ring-color);
4086
4245
  outline-offset:var(--t-focus-ring-offset);
4087
4246
  border-color:var(--t-form-border-color-hover);
4088
4247
  }
4089
4248
 
4090
- .tds-date-picker-input{
4091
- flex:1;
4092
- padding-block:var(--tds-date-picker-padding-block);
4093
- padding-inline-start:var(--t-spacing-1);
4249
+ .tds-time-field-segment{
4250
+ padding-inline:1px;
4094
4251
  font-variant-numeric:tabular-nums;
4095
- }
4096
-
4097
- .tds-date-picker-segment{
4098
- padding-inline:2px;
4252
+ cursor:text;
4099
4253
  caret-color:transparent;
4100
4254
  border-radius:var(--t-border-radius-sm);
4101
4255
  }
4102
4256
 
4103
- .tds-date-picker-segment[data-placeholder]{
4104
- color:var(--tds-date-picker-placeholder-color);
4257
+ .tds-time-field-segment[data-placeholder]{
4258
+ color:var(--tds-time-field-placeholder-color);
4105
4259
  }
4106
4260
 
4107
- .tds-date-picker-segment[data-focused]{
4261
+ .tds-time-field-segment[data-focused]{
4108
4262
  color:var(--t-text-color-inverted);
4109
4263
  outline:0;
4110
4264
  background:var(--t-fill-color-interaction);
4111
4265
  }
4112
4266
 
4113
- .tds-date-picker-segment-separator{
4267
+ .tds-time-field-segment-separator{
4114
4268
  padding-inline:0;
4115
- color:var(--tds-date-picker-placeholder-color);
4269
+ color:var(--tds-time-field-placeholder-color);
4116
4270
  }
4117
4271
 
4118
- .tds-date-picker-description{
4272
+ .tds-time-field-description{
4119
4273
  display:flex;
4120
4274
  gap:var(--t-spacing-half);
4121
4275
  align-items:flex-start;
4122
4276
  margin:0;
4123
4277
  font-size:var(--t-font-size-sm);
4124
4278
  line-height:1.35;
4125
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
4279
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4126
4280
  cursor:text;
4127
4281
  }
4128
4282
 
4129
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
4130
- display:var(--tds-date-picker-description-invalid-icon-display, none);
4283
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4284
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4131
4285
  flex-shrink:0;
4132
4286
  margin-block-start:calc(.5lh - .5em);
4133
4287
  line-height:1.35;
4134
4288
  }
4135
4289
 
4136
- .tds-date-picker-button{
4137
- flex-shrink:0;
4138
- align-self:center;
4139
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4140
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4141
- padding:0;
4142
- margin-inline-end:var(--tds-date-picker-button-offset);
4143
- }
4144
-
4145
- .tds-date-picker-popover{
4146
- padding:var(--t-spacing-2);
4147
- background:var(--t-surface-color-card);
4148
- border:1px solid var(--t-border-color);
4149
- border-radius:var(--t-border-radius);
4150
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4151
- }
4152
-
4153
- .tds-date-picker-popover[data-entering]{
4154
- animation:tds-date-picker-popover-enter 160ms ease;
4155
- }
4156
-
4157
- .tds-date-picker-popover[data-exiting]{
4158
- animation:tds-date-picker-popover-exit 130ms ease;
4159
- }
4160
-
4161
- @keyframes tds-date-picker-popover-enter{
4162
- from{
4163
- opacity:0;
4164
- transform:translateY(-8px);
4165
- }
4166
- }
4167
-
4168
- @keyframes tds-date-picker-popover-exit{
4169
- to{
4170
- opacity:0;
4171
- transform:translateY(-8px);
4172
- }
4173
- }
4174
-
4175
- @media (prefers-reduced-motion: reduce){
4176
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
4177
- animation:none;
4178
- }
4179
- }
4180
-
4181
- .tds-date-picker-calendar{
4182
- inline-size:-moz-fit-content;
4183
- inline-size:fit-content;
4184
- }
4185
-
4186
- .tds-date-picker-calendar-header{
4187
- display:flex;
4188
- align-items:center;
4189
- justify-content:space-between;
4190
- padding-block-end:var(--t-spacing-1);
4191
- }
4192
-
4193
- .tds-date-picker-calendar-title{
4194
- flex:1;
4195
- margin:0;
4196
- font-size:var(--t-font-size-md);
4197
- font-weight:var(--t-font-weight-semibold);
4198
- text-align:center;
4199
- }
4200
-
4201
- .tds-date-picker-calendar-nav{
4202
- display:flex;
4203
- align-items:center;
4204
- justify-content:center;
4205
- padding:var(--t-spacing-half);
4206
- color:var(--t-text-color);
4207
- cursor:default;
4208
- outline:0;
4209
- background:transparent;
4210
- border:0;
4211
- border-radius:var(--t-border-radius-sm);
4212
- }
4213
-
4214
- .tds-date-picker-calendar-nav[data-hovered]{
4215
- background:var(--t-fill-color-neutral-070);
4216
- }
4217
-
4218
- .tds-date-picker-calendar-nav[data-pressed]{
4219
- background:var(--t-fill-color-button-interaction-ghost-active);
4220
- }
4221
-
4222
- .tds-date-picker-calendar-nav[data-focus-visible]{
4223
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4224
- outline-offset:var(--t-focus-ring-offset);
4225
- }
4226
-
4227
- .tds-date-picker-calendar-nav[data-disabled]{
4228
- color:var(--t-form-color-disabled);
4229
- cursor:not-allowed;
4230
- }
4231
-
4232
- .tds-date-picker-calendar-grid{
4233
- border-collapse:collapse;
4234
- }
4235
-
4236
- .tds-date-picker-calendar-header-cell{
4237
- padding-block:var(--t-spacing-half);
4238
- font-size:var(--t-font-size-sm);
4239
- font-weight:var(--t-font-weight-normal);
4240
- color:var(--t-text-color-secondary);
4241
- text-align:center;
4242
- }
4243
-
4244
- .tds-date-picker-calendar-cell{
4245
- display:flex;
4246
- align-items:center;
4247
- justify-content:center;
4248
- inline-size:2.25rem;
4249
- block-size:2.25rem;
4250
- font-size:var(--t-font-size-md);
4251
- color:var(--t-text-color);
4252
- cursor:default;
4253
- outline:0;
4254
- border-radius:var(--t-border-radius-sm);
4255
- }
4256
-
4257
- .tds-date-picker-calendar-cell[data-hovered]{
4258
- background:var(--t-fill-color-neutral-070);
4259
- }
4260
-
4261
- .tds-date-picker-calendar-cell[data-pressed]{
4262
- background:var(--t-fill-color-button-interaction-ghost-active);
4263
- }
4264
-
4265
- .tds-date-picker-calendar-cell[data-selected]{
4266
- color:var(--t-text-color-inverted);
4267
- background:var(--t-fill-color-interaction);
4268
- }
4269
-
4270
- .tds-date-picker-calendar-cell[data-focus-visible]{
4271
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4272
- outline-offset:var(--t-focus-ring-offset);
4273
- }
4274
-
4275
- .tds-date-picker-calendar-cell[data-unavailable]{
4276
- color:var(--t-text-color-secondary);
4277
- text-decoration:line-through;
4278
- cursor:not-allowed;
4279
- }
4280
-
4281
- .tds-date-picker-calendar-cell[data-disabled]{
4282
- color:var(--t-form-color-disabled);
4283
- cursor:not-allowed;
4284
- }
4285
-
4286
- .tds-date-picker-calendar-cell[data-outside-month]{
4287
- color:var(--t-text-color-secondary);
4288
- }
4289
-
4290
4290
  .t-banner{
4291
4291
  --t-banner-font-size:var(--t-font-size-md);
4292
4292
  --t-banner-font-color:var(--t-text-color);