@planningcenter/tapestry 3.2.2-rc.10 → 3.2.2-rc.11

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 +863 -863
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +863 -863
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +3 -3
package/dist/reactRender.css CHANGED
@@ -1,221 +1,3 @@
1
- .tds-checkbox{
2
- --tds-checkbox-font-size:var(--t-font-size-md);
3
- --tds-checkbox-cursor:pointer;
4
- --tds-checkbox-line-height:1.4;
5
- --tds-checkbox-transition-property:background-color, border-color;
6
-
7
- --tds-checkbox-input-size:var(--t-element-size-md);
8
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
9
- --tds-checkbox-input-border-color:var(--t-form-border-color);
10
- --tds-checkbox-input-background-color:transparent;
11
-
12
- --tds-checkbox-input-icon:none;
13
- --tds-checkbox-input-icon-visibility:hidden;
14
- --tds-checkbox-input-icon-opacity:0;
15
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
16
-
17
- --tds-checkbox-label-color:var(--t-form-color);
18
-
19
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
20
- --tds-checkbox-description-line-height:1.35;
21
- --tds-checkbox-description-color:var(--t-text-color-secondary);
22
- --tds-checkbox-description-invalid-icon-display:none;
23
-
24
- position:relative;
25
- display:inline-grid;
26
- grid-template-columns:auto;
27
- grid-auto-columns:1fr;
28
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
29
- line-height:var(--tds-checkbox-line-height);
30
- cursor:var(--tds-checkbox-cursor);
31
- -webkit-user-select:none;
32
- -moz-user-select:none;
33
- user-select:none;
34
- }
35
-
36
- .tds-checkbox label{
37
- grid-area:1 / 2;
38
- font-size:var(--tds-checkbox-font-size);
39
- font-weight:var(--t-font-weight-normal);
40
- color:var(--tds-checkbox-label-color);
41
- cursor:var(--tds-checkbox-cursor);
42
- }
43
-
44
- .tds-checkbox tds-indeterminate{
45
- display:flex;
46
- }
47
-
48
- .tds-checkbox input[type="checkbox"]{
49
- position:relative;
50
- width:1em;
51
- height:1em;
52
- margin:calc((1lh - 1em) / 2) 0 0;
53
- font-size:var(--tds-checkbox-font-size);
54
- line-height:inherit;
55
- -webkit-appearance:none;
56
- -moz-appearance:none;
57
- appearance:none;
58
- cursor:var(--tds-checkbox-cursor);
59
- background-color:var(--tds-checkbox-input-background-color);
60
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
61
- border-radius:var(--tds-checkbox-input-border-radius);
62
- transition-timing-function:var(--t-ease-in-out);
63
- transition-duration:var(--t-duration-200);
64
- transition-property:var(--tds-checkbox-transition-property);
65
- }
66
-
67
- :is(.tds-checkbox input[type="checkbox"])::before{
68
- position:absolute;
69
- top:50%;
70
- left:50%;
71
- visibility:var(--tds-checkbox-input-icon-visibility);
72
- width:100%;
73
- height:100%;
74
- content:"";
75
- background-color:var(--tds-checkbox-input-icon-fill);
76
- border-radius:var(--tds-checkbox-input-border-radius);
77
- opacity:var(--tds-checkbox-input-icon-opacity);
78
- -webkit-mask-image:var(--tds-checkbox-input-icon);
79
- mask-image:var(--tds-checkbox-input-icon);
80
- -webkit-mask-repeat:no-repeat;
81
- mask-repeat:no-repeat;
82
- -webkit-mask-size:contain;
83
- mask-size:contain;
84
- transform:translate(-50%, -50%);
85
- }
86
-
87
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
88
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
89
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
90
- }
91
-
92
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
93
- outline:var(--t-focus-ring-outline);
94
- outline-offset:var(--t-focus-ring-offset);
95
- }
96
-
97
- :is(.tds-checkbox input[type="checkbox"]):disabled{
98
- pointer-events:none;
99
- }
100
-
101
- @media (prefers-reduced-motion: reduce){
102
-
103
- .tds-checkbox input[type="checkbox"]{
104
- --tds-checkbox-transition-property:none;
105
- }
106
- }
107
-
108
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
109
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
110
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
111
- --tds-checkbox-input-icon-visibility:visible;
112
- --tds-checkbox-input-icon-opacity:1;
113
- }
114
-
115
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
116
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
117
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
118
- }
119
-
120
- .tds-checkbox:has(input:checked){
121
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
122
- }
123
-
124
- .tds-checkbox:has(input:indeterminate){
125
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
126
- }
127
-
128
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
129
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
130
- --tds-checkbox-description-color:var(--t-text-color-status-error);
131
- --tds-checkbox-description-invalid-icon-display:inline-block;
132
- }
133
-
134
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
135
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
136
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
137
- }
138
-
139
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
140
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
141
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
142
- }
143
-
144
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
145
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
146
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
147
- }
148
-
149
- .tds-checkbox:has(input:required) label::after{
150
- margin-left:.25ch;
151
- color:var(--t-text-color-status-error);
152
- content:"*";
153
- }
154
-
155
- .tds-checkbox:has(input:disabled){
156
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
157
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
158
-
159
- --tds-checkbox-label-color:var(--t-form-color-disabled);
160
- --tds-checkbox-description-color:var(--t-form-color-disabled);
161
- --tds-checkbox-cursor:not-allowed;
162
- }
163
-
164
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
165
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
166
- }
167
-
168
- .tds-checkbox-description{
169
- display:flex;
170
- grid-area:2 / 2;
171
- gap:var(--t-spacing-half);
172
- align-items:flex-start;
173
- margin:0;
174
- font-size:var(--tds-checkbox-description-font-size);
175
- line-height:var(--tds-checkbox-description-line-height);
176
- color:var(--tds-checkbox-description-color);
177
- cursor:text;
178
- }
179
-
180
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
181
- display:var(--tds-checkbox-description-invalid-icon-display);
182
- flex-shrink:0;
183
- margin-top:calc(.5lh - .5em);
184
- line-height:var(--tds-checkbox-description-line-height);
185
- }
186
-
187
- .tds-checkbox--sm{
188
- --tds-checkbox-line-height:1.35;
189
- --tds-checkbox-input-size:var(--t-element-size-sm);
190
- --tds-checkbox-font-size:var(--t-font-size-sm);
191
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
192
- --tds-checkbox-description-line-height:1.3;
193
- }
194
-
195
-
196
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
197
- -webkit-appearance:none;
198
- appearance:none;
199
- }
200
-
201
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
202
- inline-size:1em;
203
- block-size:2em;
204
- }
205
-
206
- @supports (field-sizing: content){
207
- .tds-input--auto-width{
208
- inline-size:-moz-fit-content;
209
- inline-size:fit-content;
210
- min-inline-size:min(100%, 122px);
211
- }
212
-
213
- .tds-input--auto-width input{
214
- field-sizing:content;
215
- inline-size:auto;
216
- }
217
- }
218
-
219
1
 
220
2
  @media (prefers-reduced-motion: no-preference){
221
3
 
@@ -578,33 +360,227 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
578
360
  flex-direction:column;
579
361
  }
580
362
 
581
- @layer t-critical{
582
- tds-page-header:not(.hydrated){
583
- display:none;
584
- }
585
- }
363
+ .tds-checkbox{
364
+ --tds-checkbox-font-size:var(--t-font-size-md);
365
+ --tds-checkbox-cursor:pointer;
366
+ --tds-checkbox-line-height:1.4;
367
+ --tds-checkbox-transition-property:background-color, border-color;
586
368
 
587
- @layer t-component{
588
- .tds-page-header{
589
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
590
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
591
- --tds-page-header-color:var(--t-text-color);
592
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
593
- --tds-page-header-headline-color:var(--t-text-color-headline);
594
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
595
- --tds-page-header-padding-x:var(--t-spacing-2);
596
- --tds-page-header-padding-y:var(--t-spacing-2);
597
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
598
- --tds-page-header-nav-gap:var(--t-spacing-1);
599
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
600
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
601
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
602
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
603
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
604
- --tds-page-header-nav-item-border-width:1px;
369
+ --tds-checkbox-input-size:var(--t-element-size-md);
370
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
371
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
372
+ --tds-checkbox-input-background-color:transparent;
605
373
 
606
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
607
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
374
+ --tds-checkbox-input-icon:none;
375
+ --tds-checkbox-input-icon-visibility:hidden;
376
+ --tds-checkbox-input-icon-opacity:0;
377
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
378
+
379
+ --tds-checkbox-label-color:var(--t-form-color);
380
+
381
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
382
+ --tds-checkbox-description-line-height:1.35;
383
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
384
+ --tds-checkbox-description-invalid-icon-display:none;
385
+
386
+ position:relative;
387
+ display:inline-grid;
388
+ grid-template-columns:auto;
389
+ grid-auto-columns:1fr;
390
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
391
+ line-height:var(--tds-checkbox-line-height);
392
+ cursor:var(--tds-checkbox-cursor);
393
+ -webkit-user-select:none;
394
+ -moz-user-select:none;
395
+ user-select:none;
396
+ }
397
+
398
+ .tds-checkbox label{
399
+ grid-area:1 / 2;
400
+ font-size:var(--tds-checkbox-font-size);
401
+ font-weight:var(--t-font-weight-normal);
402
+ color:var(--tds-checkbox-label-color);
403
+ cursor:var(--tds-checkbox-cursor);
404
+ }
405
+
406
+ .tds-checkbox tds-indeterminate{
407
+ display:flex;
408
+ }
409
+
410
+ .tds-checkbox input[type="checkbox"]{
411
+ position:relative;
412
+ width:1em;
413
+ height:1em;
414
+ margin:calc((1lh - 1em) / 2) 0 0;
415
+ font-size:var(--tds-checkbox-font-size);
416
+ line-height:inherit;
417
+ -webkit-appearance:none;
418
+ -moz-appearance:none;
419
+ appearance:none;
420
+ cursor:var(--tds-checkbox-cursor);
421
+ background-color:var(--tds-checkbox-input-background-color);
422
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
423
+ border-radius:var(--tds-checkbox-input-border-radius);
424
+ transition-timing-function:var(--t-ease-in-out);
425
+ transition-duration:var(--t-duration-200);
426
+ transition-property:var(--tds-checkbox-transition-property);
427
+ }
428
+
429
+ :is(.tds-checkbox input[type="checkbox"])::before{
430
+ position:absolute;
431
+ top:50%;
432
+ left:50%;
433
+ visibility:var(--tds-checkbox-input-icon-visibility);
434
+ width:100%;
435
+ height:100%;
436
+ content:"";
437
+ background-color:var(--tds-checkbox-input-icon-fill);
438
+ border-radius:var(--tds-checkbox-input-border-radius);
439
+ opacity:var(--tds-checkbox-input-icon-opacity);
440
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
441
+ mask-image:var(--tds-checkbox-input-icon);
442
+ -webkit-mask-repeat:no-repeat;
443
+ mask-repeat:no-repeat;
444
+ -webkit-mask-size:contain;
445
+ mask-size:contain;
446
+ transform:translate(-50%, -50%);
447
+ }
448
+
449
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
450
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
451
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
452
+ }
453
+
454
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
455
+ outline:var(--t-focus-ring-outline);
456
+ outline-offset:var(--t-focus-ring-offset);
457
+ }
458
+
459
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
460
+ pointer-events:none;
461
+ }
462
+
463
+ @media (prefers-reduced-motion: reduce){
464
+
465
+ .tds-checkbox input[type="checkbox"]{
466
+ --tds-checkbox-transition-property:none;
467
+ }
468
+ }
469
+
470
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
471
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
472
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
473
+ --tds-checkbox-input-icon-visibility:visible;
474
+ --tds-checkbox-input-icon-opacity:1;
475
+ }
476
+
477
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
478
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
479
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
480
+ }
481
+
482
+ .tds-checkbox:has(input:checked){
483
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
484
+ }
485
+
486
+ .tds-checkbox:has(input:indeterminate){
487
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
488
+ }
489
+
490
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
491
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
492
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
493
+ --tds-checkbox-description-invalid-icon-display:inline-block;
494
+ }
495
+
496
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
497
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
498
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
499
+ }
500
+
501
+ :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{
502
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
503
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
504
+ }
505
+
506
+ :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){
507
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
508
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
509
+ }
510
+
511
+ .tds-checkbox:has(input:required) label::after{
512
+ margin-left:.25ch;
513
+ color:var(--t-text-color-status-error);
514
+ content:"*";
515
+ }
516
+
517
+ .tds-checkbox:has(input:disabled){
518
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
519
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
520
+
521
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
522
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
523
+ --tds-checkbox-cursor:not-allowed;
524
+ }
525
+
526
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
527
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
528
+ }
529
+
530
+ .tds-checkbox-description{
531
+ display:flex;
532
+ grid-area:2 / 2;
533
+ gap:var(--t-spacing-half);
534
+ align-items:flex-start;
535
+ margin:0;
536
+ font-size:var(--tds-checkbox-description-font-size);
537
+ line-height:var(--tds-checkbox-description-line-height);
538
+ color:var(--tds-checkbox-description-color);
539
+ cursor:text;
540
+ }
541
+
542
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
543
+ display:var(--tds-checkbox-description-invalid-icon-display);
544
+ flex-shrink:0;
545
+ margin-top:calc(.5lh - .5em);
546
+ line-height:var(--tds-checkbox-description-line-height);
547
+ }
548
+
549
+ .tds-checkbox--sm{
550
+ --tds-checkbox-line-height:1.35;
551
+ --tds-checkbox-input-size:var(--t-element-size-sm);
552
+ --tds-checkbox-font-size:var(--t-font-size-sm);
553
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
554
+ --tds-checkbox-description-line-height:1.3;
555
+ }
556
+
557
+ @layer t-critical{
558
+ tds-page-header:not(.hydrated){
559
+ display:none;
560
+ }
561
+ }
562
+
563
+ @layer t-component{
564
+ .tds-page-header{
565
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
566
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
567
+ --tds-page-header-color:var(--t-text-color);
568
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
569
+ --tds-page-header-headline-color:var(--t-text-color-headline);
570
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
571
+ --tds-page-header-padding-x:var(--t-spacing-2);
572
+ --tds-page-header-padding-y:var(--t-spacing-2);
573
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
574
+ --tds-page-header-nav-gap:var(--t-spacing-1);
575
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
576
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
577
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
578
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
579
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
580
+ --tds-page-header-nav-item-border-width:1px;
581
+
582
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
583
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
608
584
 
609
585
  --tds-page-header-nav-item-color-hover:var(--t-text-color);
610
586
  --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
@@ -841,137 +817,110 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
841
817
  }
842
818
  }
843
819
 
844
- .tds-radio{
845
- --tds-radio-font-size:var(--t-font-size-md);
846
- --tds-radio-cursor:pointer;
847
- --tds-radio-line-height:1.4;
848
- --tds-radio-transition-property:border-width;
849
-
850
- --tds-radio-input-size:var(--t-element-size-md);
851
- --tds-radio-input-border-radius:var(--t-border-radius-round);
852
- --tds-radio-input-border-color:var(--t-form-border-color);
853
- --tds-radio-input-border-width:var(--t-form-border-width);
854
- --tds-radio-input-background-color:transparent;
855
-
856
- --tds-radio-label-color:var(--t-form-color);
820
+ .tds-input:has(textarea){
821
+ --tds-input-padding-block:6px;
822
+ --tds-input-resizer-size:var(--t-element-size-sm);
823
+ --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");
824
+ }
857
825
 
858
- --tds-radio-description-font-size:var(--t-font-size-sm);
859
- --tds-radio-description-line-height:1.35;
860
- --tds-radio-description-color:var(--t-text-color-secondary);
826
+ @supports (x: attr(x type(*))){
861
827
 
862
- position:relative;
863
- display:inline-grid;
864
- grid-template-columns:auto;
865
- grid-auto-columns:1fr;
866
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
867
- line-height:var(--tds-radio-line-height);
868
- cursor:var(--tds-radio-cursor);
869
- -webkit-user-select:none;
870
- -moz-user-select:none;
871
- user-select:none;
828
+ .tds-input:has(textarea){
829
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
872
830
  }
873
-
874
- .tds-radio label{
875
- grid-area:1 / 2;
876
- font-size:var(--tds-radio-font-size);
877
- font-weight:var(--t-font-weight-normal);
878
- color:var(--tds-radio-label-color);
879
- cursor:var(--tds-radio-cursor);
880
831
  }
881
832
 
882
- .tds-radio input[type="radio"]{
883
- position:relative;
884
- width:1em;
885
- height:1em;
886
- margin:calc((1lh - 1em) / 2) 0 0;
887
- font-size:var(--tds-radio-font-size);
888
- line-height:inherit;
889
- -webkit-appearance:none;
890
- -moz-appearance:none;
891
- appearance:none;
892
- cursor:var(--tds-radio-cursor);
893
- background-color:var(--tds-radio-input-background-color);
894
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
895
- border-radius:var(--tds-radio-input-border-radius);
896
- transition-timing-function:var(--t-ease-in-out);
897
- transition-duration:var(--t-duration-200);
898
- transition-property:var(--tds-radio-transition-property);
899
- }
833
+ .tds-input.tds-textarea--resize-vertical textarea{
834
+ resize:vertical;
835
+ }
900
836
 
901
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
902
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
903
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
837
+ .tds-input.tds-textarea--resize-none textarea{
838
+ resize:none;
904
839
  }
905
840
 
906
- :is(.tds-radio input[type="radio"]):focus-visible{
907
- outline:var(--t-focus-ring-outline);
908
- outline-offset:var(--t-focus-ring-offset);
841
+ .tds-input.tds-textarea--resize-auto textarea{
842
+ resize:vertical;
909
843
  }
910
844
 
911
- :is(.tds-radio input[type="radio"]):disabled{
912
- pointer-events:none;
845
+ @supports (field-sizing: content){
846
+ .tds-input.tds-textarea--resize-auto textarea{
847
+ field-sizing:content;
848
+ resize:none;
849
+ }
913
850
  }
914
851
 
915
- @media (prefers-reduced-motion: reduce){
852
+ .tds-input textarea{
853
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
854
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
855
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
856
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
857
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
858
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
859
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
860
+ --tds-input-scrollbar-thumb-border-radius:999px;
861
+ --tds-input-scrollbar-thumb-border-width:3px;
862
+ --tds-input-scrollbar-track-margin-block:.125rem;
863
+ scrollbar-color:initial;
864
+ transition-timing-function:var(--t-ease-in-out);
865
+ transition-duration:var(--t-duration-200);
866
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
867
+ }
916
868
 
917
- .tds-radio input[type="radio"]{
918
- --tds-radio-transition-property:none;
919
- }
869
+ @media (pointer: fine){
870
+ :is(.tds-input textarea)::-webkit-scrollbar{
871
+ width:12px;
872
+ height:12px;
873
+ cursor:default;
920
874
  }
921
875
 
922
- .tds-radio:has(input:checked){
923
- --tds-radio-input-background-color:var(--t-form-background-color);
924
- --tds-radio-input-border-color:var(--t-border-color-control-info);
925
- --tds-radio-input-border-width:4px;
926
- }
876
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
877
+ cursor:default;
878
+ background:var(--tds-input-scrollbar-thumb-color);
879
+ background-clip:content-box;
880
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
881
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
882
+ }
927
883
 
928
- .tds-radio:has(input:checked) input:hover:not(:disabled){
929
- --tds-radio-input-background-color:var(--t-form-background-color);
930
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
884
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
885
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
931
886
  }
932
887
 
933
- .tds-radio:has(input:user-invalid){
934
- --tds-radio-input-border-color:var(--t-form-border-color-error);
935
- }
888
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
889
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
890
+ }
936
891
 
937
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
938
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
939
- --tds-radio-input-background-color:var(--t-form-background-color-error);
892
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
893
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
940
894
  }
941
895
 
942
- .tds-radio:has(input:disabled){
943
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
944
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
896
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
897
+ background:var(--tds-input-scrollbar-surface-color);
898
+ }
945
899
 
946
- --tds-radio-label-color:var(--t-form-color-disabled);
947
- --tds-radio-description-color:var(--t-form-color-disabled);
948
- --tds-radio-cursor:not-allowed;
949
- }
900
+ :is(.tds-input textarea)::-webkit-resizer{
901
+ background:var(--tds-input-resizer-icon) no-repeat;
902
+ background-position:right bottom;
903
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
904
+ }
950
905
 
951
- .tds-radio:has(input:disabled) input:checked{
952
- --tds-radio-input-background-color:var(--t-form-background-color);
953
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
906
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
907
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
908
+ cursor:default;
954
909
  }
955
910
 
956
- .tds-radio-description{
957
- display:flex;
958
- grid-area:2 / 2;
959
- gap:var(--t-spacing-half);
960
- align-items:flex-start;
961
- margin:0;
962
- font-size:var(--tds-radio-description-font-size);
963
- line-height:var(--tds-radio-description-line-height);
964
- color:var(--tds-radio-description-color);
965
- cursor:text;
966
- }
911
+ @supports (-moz-appearance: none){
912
+ :is(.tds-input textarea){
913
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
914
+ scrollbar-width:thin;
915
+ }
967
916
 
968
- .tds-radio--sm{
969
- --tds-radio-line-height:1.35;
970
- --tds-radio-input-size:var(--t-element-size-sm);
971
- --tds-radio-font-size:var(--t-font-size-sm);
972
- --tds-radio-description-font-size:var(--t-font-size-xs);
973
- --tds-radio-description-line-height:1.3;
974
- }
917
+ @media (hover){
918
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
919
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
920
+ }
921
+ }
922
+ }
923
+ }
975
924
 
976
925
  .tds-radio-group{
977
926
  --tds-radio-group-font-size:var(--t-font-size-md);
@@ -1060,110 +1009,302 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1060
1009
  --tds-radio-group-description-line-height:1.3;
1061
1010
  }
1062
1011
 
1063
- .tds-input:has(textarea){
1064
- --tds-input-padding-block:6px;
1065
- --tds-input-resizer-size:var(--t-element-size-sm);
1066
- --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");
1067
- }
1012
+ .tds-toggle-switch{
1013
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1014
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1015
+ --tds-toggle-switch-cursor:pointer;
1016
+ --tds-toggle-switch-display:inline-grid;
1017
+ --tds-toggle-switch-line-height:1.4;
1068
1018
 
1069
- @supports (x: attr(x type(*))){
1019
+ --tds-toggle-switch-label-color:var(--t-form-color);
1070
1020
 
1071
- .tds-input:has(textarea){
1072
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1073
- }
1074
- }
1021
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1022
+ --tds-toggle-switch-track-outline:none;
1023
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1024
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1025
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1075
1026
 
1076
- .tds-input.tds-textarea--resize-vertical textarea{
1077
- resize:vertical;
1078
- }
1027
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1028
+ --tds-toggle-switch-thumb-transform:translateX(0);
1029
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1079
1030
 
1080
- .tds-input.tds-textarea--resize-none textarea{
1081
- resize:none;
1082
- }
1031
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1032
+ --tds-toggle-switch-description-line-height:1.35;
1033
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1034
+ position:relative;
1083
1035
 
1084
- .tds-input.tds-textarea--resize-auto textarea{
1085
- resize:vertical;
1086
- }
1036
+ display:var(--tds-toggle-switch-display);
1037
+ grid-template-columns:auto;
1038
+ grid-auto-columns:1fr;
1039
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1040
+ -webkit-user-select:none;
1041
+ -moz-user-select:none;
1042
+ user-select:none;
1043
+ }
1087
1044
 
1088
- @supports (field-sizing: content){
1089
- .tds-input.tds-textarea--resize-auto textarea{
1090
- field-sizing:content;
1091
- resize:none;
1092
- }
1045
+ .tds-toggle-switch input[type="checkbox"]{
1046
+ position:absolute;
1047
+ width:var(--tds-toggle-switch-track-width);
1048
+ height:var(--tds-toggle-switch-track-height);
1049
+ margin:0;
1050
+ -webkit-appearance:none;
1051
+ -moz-appearance:none;
1052
+ appearance:none;
1053
+ cursor:var(--tds-toggle-switch-cursor);
1054
+ outline:var(--tds-toggle-switch-track-outline);
1055
+ outline-offset:var(--t-focus-ring-offset);
1056
+ background-color:transparent;
1057
+ border:0;
1058
+ border-radius:var(--t-border-radius-round);
1059
+ }
1060
+
1061
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1062
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1093
1063
  }
1094
1064
 
1095
- .tds-input textarea{
1096
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1097
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1098
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1099
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1100
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1101
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1102
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1103
- --tds-input-scrollbar-thumb-border-radius:999px;
1104
- --tds-input-scrollbar-thumb-border-width:3px;
1105
- --tds-input-scrollbar-track-margin-block:.125rem;
1106
- scrollbar-color:initial;
1107
- transition-timing-function:var(--t-ease-in-out);
1108
- transition-duration:var(--t-duration-200);
1109
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1110
- }
1065
+ .tds-toggle-switch label{
1066
+ display:inline-flex;
1067
+ grid-area:1 / 2;
1068
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1069
+ column-gap:var(--tds-toggle-switch-column-gap);
1070
+ margin-top:-.09375em;
1071
+ font-size:var(--tds-toggle-switch-font-size);
1072
+ font-weight:var(--t-font-weight-normal);
1073
+ line-height:var(--tds-toggle-switch-line-height);
1074
+ color:var(--tds-toggle-switch-label-color);
1075
+ cursor:var(--tds-toggle-switch-cursor);
1076
+ }
1111
1077
 
1112
- @media (pointer: fine){
1113
- :is(.tds-input textarea)::-webkit-scrollbar{
1114
- width:12px;
1115
- height:12px;
1116
- cursor:default;
1117
- }
1078
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1079
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1080
+ }
1118
1081
 
1119
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1120
- cursor:default;
1121
- background:var(--tds-input-scrollbar-thumb-color);
1122
- background-clip:content-box;
1123
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1124
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1125
- }
1082
+ .tds-toggle-switch:has(input:checked){
1083
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1084
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1085
+ }
1126
1086
 
1127
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1128
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1087
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1088
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1129
1089
  }
1130
1090
 
1131
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1132
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1091
+ .tds-toggle-switch:has(input:disabled){
1092
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1093
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1094
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1095
+ --tds-toggle-switch-cursor:not-allowed;
1096
+ }
1097
+
1098
+ .tds-toggle-switch-track{
1099
+ position:relative;
1100
+ flex-shrink:0;
1101
+ width:var(--tds-toggle-switch-track-width);
1102
+ height:var(--tds-toggle-switch-track-height);
1103
+ background-color:var(--tds-toggle-switch-track-background-color);
1104
+ border-radius:var(--t-border-radius-round);
1105
+ transition:var(--tds-toggle-switch-track-transition);
1106
+ }
1107
+
1108
+ .tds-toggle-switch-track::before{
1109
+ position:absolute;
1110
+ top:var(--t-spacing-fourth);
1111
+ left:var(--t-spacing-fourth);
1112
+ width:var(--tds-toggle-switch-thumb-size);
1113
+ height:var(--tds-toggle-switch-thumb-size);
1114
+ content:"";
1115
+ background-color:#fff;
1116
+ border-radius:var(--t-border-radius-round);
1117
+ transform:var(--tds-toggle-switch-thumb-transform);
1118
+ transition:var(--tds-toggle-switch-thumb-transition);
1119
+ }
1120
+
1121
+ @media (prefers-reduced-motion: reduce){
1122
+
1123
+ .tds-toggle-switch-track{
1124
+ --tds-toggle-switch-track-transition:none;
1125
+ --tds-toggle-switch-thumb-transition:none;
1126
+ }
1127
+ }
1128
+
1129
+ .tds-toggle-switch-description{
1130
+ display:flex;
1131
+ grid-area:2 / 2;
1132
+ align-items:flex-start;
1133
+ margin:0;
1134
+ font-size:var(--tds-toggle-switch-description-font-size);
1135
+ line-height:var(--tds-toggle-switch-description-line-height);
1136
+ color:var(--tds-toggle-switch-description-color);
1137
+ cursor:text;
1138
+ }
1139
+
1140
+ .tds-toggle-switch--sm{
1141
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1142
+ --tds-toggle-switch-line-height:1.35;
1143
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1144
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1145
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1146
+ --tds-toggle-switch-description-line-height:1.3;
1147
+ }
1148
+
1149
+ .tds-toggle-switch--hide-label{
1150
+ --tds-toggle-switch-display:inline-flex;
1151
+ }
1152
+
1153
+ .tds-radio{
1154
+ --tds-radio-font-size:var(--t-font-size-md);
1155
+ --tds-radio-cursor:pointer;
1156
+ --tds-radio-line-height:1.4;
1157
+ --tds-radio-transition-property:border-width;
1158
+
1159
+ --tds-radio-input-size:var(--t-element-size-md);
1160
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1161
+ --tds-radio-input-border-color:var(--t-form-border-color);
1162
+ --tds-radio-input-border-width:var(--t-form-border-width);
1163
+ --tds-radio-input-background-color:transparent;
1164
+
1165
+ --tds-radio-label-color:var(--t-form-color);
1166
+
1167
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1168
+ --tds-radio-description-line-height:1.35;
1169
+ --tds-radio-description-color:var(--t-text-color-secondary);
1170
+
1171
+ position:relative;
1172
+ display:inline-grid;
1173
+ grid-template-columns:auto;
1174
+ grid-auto-columns:1fr;
1175
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
1176
+ line-height:var(--tds-radio-line-height);
1177
+ cursor:var(--tds-radio-cursor);
1178
+ -webkit-user-select:none;
1179
+ -moz-user-select:none;
1180
+ user-select:none;
1181
+ }
1182
+
1183
+ .tds-radio label{
1184
+ grid-area:1 / 2;
1185
+ font-size:var(--tds-radio-font-size);
1186
+ font-weight:var(--t-font-weight-normal);
1187
+ color:var(--tds-radio-label-color);
1188
+ cursor:var(--tds-radio-cursor);
1189
+ }
1190
+
1191
+ .tds-radio input[type="radio"]{
1192
+ position:relative;
1193
+ width:1em;
1194
+ height:1em;
1195
+ margin:calc((1lh - 1em) / 2) 0 0;
1196
+ font-size:var(--tds-radio-font-size);
1197
+ line-height:inherit;
1198
+ -webkit-appearance:none;
1199
+ -moz-appearance:none;
1200
+ appearance:none;
1201
+ cursor:var(--tds-radio-cursor);
1202
+ background-color:var(--tds-radio-input-background-color);
1203
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1204
+ border-radius:var(--tds-radio-input-border-radius);
1205
+ transition-timing-function:var(--t-ease-in-out);
1206
+ transition-duration:var(--t-duration-200);
1207
+ transition-property:var(--tds-radio-transition-property);
1208
+ }
1209
+
1210
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1211
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1212
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1133
1213
  }
1134
1214
 
1135
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1136
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1215
+ :is(.tds-radio input[type="radio"]):focus-visible{
1216
+ outline:var(--t-focus-ring-outline);
1217
+ outline-offset:var(--t-focus-ring-offset);
1137
1218
  }
1138
1219
 
1139
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1140
- background:var(--tds-input-scrollbar-surface-color);
1220
+ :is(.tds-radio input[type="radio"]):disabled{
1221
+ pointer-events:none;
1141
1222
  }
1142
1223
 
1143
- :is(.tds-input textarea)::-webkit-resizer{
1144
- background:var(--tds-input-resizer-icon) no-repeat;
1145
- background-position:right bottom;
1146
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1224
+ @media (prefers-reduced-motion: reduce){
1225
+
1226
+ .tds-radio input[type="radio"]{
1227
+ --tds-radio-transition-property:none;
1228
+ }
1147
1229
  }
1148
1230
 
1149
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1150
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1151
- cursor:default;
1231
+ .tds-radio:has(input:checked){
1232
+ --tds-radio-input-background-color:var(--t-form-background-color);
1233
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1234
+ --tds-radio-input-border-width:4px;
1235
+ }
1236
+
1237
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1238
+ --tds-radio-input-background-color:var(--t-form-background-color);
1239
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1152
1240
  }
1153
1241
 
1154
- @supports (-moz-appearance: none){
1155
- :is(.tds-input textarea){
1156
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1157
- scrollbar-width:thin;
1158
- }
1242
+ .tds-radio:has(input:user-invalid){
1243
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1244
+ }
1159
1245
 
1160
- @media (hover){
1161
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1162
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1163
- }
1164
- }
1246
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1247
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1248
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1249
+ }
1250
+
1251
+ .tds-radio:has(input:disabled){
1252
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1253
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1254
+
1255
+ --tds-radio-label-color:var(--t-form-color-disabled);
1256
+ --tds-radio-description-color:var(--t-form-color-disabled);
1257
+ --tds-radio-cursor:not-allowed;
1258
+ }
1259
+
1260
+ .tds-radio:has(input:disabled) input:checked{
1261
+ --tds-radio-input-background-color:var(--t-form-background-color);
1262
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1263
+ }
1264
+
1265
+ .tds-radio-description{
1266
+ display:flex;
1267
+ grid-area:2 / 2;
1268
+ gap:var(--t-spacing-half);
1269
+ align-items:flex-start;
1270
+ margin:0;
1271
+ font-size:var(--tds-radio-description-font-size);
1272
+ line-height:var(--tds-radio-description-line-height);
1273
+ color:var(--tds-radio-description-color);
1274
+ cursor:text;
1275
+ }
1276
+
1277
+ .tds-radio--sm{
1278
+ --tds-radio-line-height:1.35;
1279
+ --tds-radio-input-size:var(--t-element-size-sm);
1280
+ --tds-radio-font-size:var(--t-font-size-sm);
1281
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1282
+ --tds-radio-description-line-height:1.3;
1283
+ }
1284
+
1285
+
1286
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1287
+ -webkit-appearance:none;
1288
+ appearance:none;
1165
1289
  }
1290
+
1291
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1292
+ inline-size:1em;
1293
+ block-size:2em;
1294
+ }
1295
+
1296
+ @supports (field-sizing: content){
1297
+ .tds-input--auto-width{
1298
+ inline-size:-moz-fit-content;
1299
+ inline-size:fit-content;
1300
+ min-inline-size:min(100%, 122px);
1301
+ }
1302
+
1303
+ .tds-input--auto-width input{
1304
+ field-sizing:content;
1305
+ inline-size:auto;
1166
1306
  }
1307
+ }
1167
1308
 
1168
1309
  .tds-select{
1169
1310
  --tds-select-border-color:var(--t-form-border-color);
@@ -1599,164 +1740,23 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1599
1740
  }
1600
1741
  }
1601
1742
 
1602
- .tds-toggle-switch{
1603
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1604
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1605
- --tds-toggle-switch-cursor:pointer;
1606
- --tds-toggle-switch-display:inline-grid;
1607
- --tds-toggle-switch-line-height:1.4;
1608
-
1609
- --tds-toggle-switch-label-color:var(--t-form-color);
1743
+ .tds-input{
1744
+ --tds-input-border-color:var(--t-form-border-color);
1745
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
1746
+ --tds-input-background-color:var(--t-form-background-color);
1747
+ --tds-input-color:var(--t-form-color);
1748
+ --tds-input-font-size:var(--t-font-size-md);
1749
+ --tds-input-description-color:var(--t-text-color-secondary);
1750
+ --tds-input-description-invalid-icon-display:none;
1751
+ --tds-input-min-height:var(--t-container-size-md);
1752
+ --tds-input-padding-inline:var(--t-spacing-1);
1610
1753
 
1611
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1612
- --tds-toggle-switch-track-outline:none;
1613
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1614
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1615
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1754
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
1616
1755
 
1617
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1618
- --tds-toggle-switch-thumb-transform:translateX(0);
1619
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1620
-
1621
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1622
- --tds-toggle-switch-description-line-height:1.35;
1623
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1624
- position:relative;
1625
-
1626
- display:var(--tds-toggle-switch-display);
1627
- grid-template-columns:auto;
1628
- grid-auto-columns:1fr;
1629
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1630
- -webkit-user-select:none;
1631
- -moz-user-select:none;
1632
- user-select:none;
1633
- }
1634
-
1635
- .tds-toggle-switch input[type="checkbox"]{
1636
- position:absolute;
1637
- width:var(--tds-toggle-switch-track-width);
1638
- height:var(--tds-toggle-switch-track-height);
1639
- margin:0;
1640
- -webkit-appearance:none;
1641
- -moz-appearance:none;
1642
- appearance:none;
1643
- cursor:var(--tds-toggle-switch-cursor);
1644
- outline:var(--tds-toggle-switch-track-outline);
1645
- outline-offset:var(--t-focus-ring-offset);
1646
- background-color:transparent;
1647
- border:0;
1648
- border-radius:var(--t-border-radius-round);
1649
- }
1650
-
1651
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1652
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1653
- }
1654
-
1655
- .tds-toggle-switch label{
1656
- display:inline-flex;
1657
- grid-area:1 / 2;
1658
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1659
- column-gap:var(--tds-toggle-switch-column-gap);
1660
- margin-top:-.09375em;
1661
- font-size:var(--tds-toggle-switch-font-size);
1662
- font-weight:var(--t-font-weight-normal);
1663
- line-height:var(--tds-toggle-switch-line-height);
1664
- color:var(--tds-toggle-switch-label-color);
1665
- cursor:var(--tds-toggle-switch-cursor);
1666
- }
1667
-
1668
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1669
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1670
- }
1671
-
1672
- .tds-toggle-switch:has(input:checked){
1673
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1674
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1675
- }
1676
-
1677
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1678
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1679
- }
1680
-
1681
- .tds-toggle-switch:has(input:disabled){
1682
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1683
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1684
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1685
- --tds-toggle-switch-cursor:not-allowed;
1686
- }
1687
-
1688
- .tds-toggle-switch-track{
1689
- position:relative;
1690
- flex-shrink:0;
1691
- width:var(--tds-toggle-switch-track-width);
1692
- height:var(--tds-toggle-switch-track-height);
1693
- background-color:var(--tds-toggle-switch-track-background-color);
1694
- border-radius:var(--t-border-radius-round);
1695
- transition:var(--tds-toggle-switch-track-transition);
1696
- }
1697
-
1698
- .tds-toggle-switch-track::before{
1699
- position:absolute;
1700
- top:var(--t-spacing-fourth);
1701
- left:var(--t-spacing-fourth);
1702
- width:var(--tds-toggle-switch-thumb-size);
1703
- height:var(--tds-toggle-switch-thumb-size);
1704
- content:"";
1705
- background-color:#fff;
1706
- border-radius:var(--t-border-radius-round);
1707
- transform:var(--tds-toggle-switch-thumb-transform);
1708
- transition:var(--tds-toggle-switch-thumb-transition);
1709
- }
1710
-
1711
- @media (prefers-reduced-motion: reduce){
1712
-
1713
- .tds-toggle-switch-track{
1714
- --tds-toggle-switch-track-transition:none;
1715
- --tds-toggle-switch-thumb-transition:none;
1716
- }
1717
- }
1718
-
1719
- .tds-toggle-switch-description{
1720
- display:flex;
1721
- grid-area:2 / 2;
1722
- align-items:flex-start;
1723
- margin:0;
1724
- font-size:var(--tds-toggle-switch-description-font-size);
1725
- line-height:var(--tds-toggle-switch-description-line-height);
1726
- color:var(--tds-toggle-switch-description-color);
1727
- cursor:text;
1728
- }
1729
-
1730
- .tds-toggle-switch--sm{
1731
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1732
- --tds-toggle-switch-line-height:1.35;
1733
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1734
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1735
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1736
- --tds-toggle-switch-description-line-height:1.3;
1737
- }
1738
-
1739
- .tds-toggle-switch--hide-label{
1740
- --tds-toggle-switch-display:inline-flex;
1741
- }
1742
-
1743
- .tds-input{
1744
- --tds-input-border-color:var(--t-form-border-color);
1745
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
1746
- --tds-input-background-color:var(--t-form-background-color);
1747
- --tds-input-color:var(--t-form-color);
1748
- --tds-input-font-size:var(--t-font-size-md);
1749
- --tds-input-description-color:var(--t-text-color-secondary);
1750
- --tds-input-description-invalid-icon-display:none;
1751
- --tds-input-min-height:var(--t-container-size-md);
1752
- --tds-input-padding-inline:var(--t-spacing-1);
1753
-
1754
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
1755
-
1756
- display:flex;
1757
- flex-direction:column;
1758
- gap:var(--t-spacing-half);
1759
- }
1756
+ display:flex;
1757
+ flex-direction:column;
1758
+ gap:var(--t-spacing-half);
1759
+ }
1760
1760
 
1761
1761
  .tds-input label{
1762
1762
  font-size:var(--t-font-size-md);
@@ -3683,19 +3683,18 @@ a[class="tds-btn"]{
3683
3683
  line-height:1.35;
3684
3684
  }
3685
3685
 
3686
- .tds-date-picker{
3687
- --tds-date-picker-border-color:var(--t-form-border-color);
3688
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3689
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3690
- --tds-date-picker-background-color:var(--t-form-background-color);
3691
- --tds-date-picker-color:var(--t-form-color);
3692
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3693
- --tds-date-picker-font-size:var(--t-font-size-md);
3694
- --tds-date-picker-min-height:var(--t-container-size-md);
3695
- --tds-date-picker-padding-block:6px;
3696
- --tds-date-picker-button-offset:4px;
3697
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3698
- --tds-date-picker-description-invalid-icon-display:none;
3686
+ .tds-time-field{
3687
+ --tds-time-field-border-color:var(--t-form-border-color);
3688
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3689
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3690
+ --tds-time-field-background-color:var(--t-form-background-color);
3691
+ --tds-time-field-color:var(--t-form-color);
3692
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3693
+ --tds-time-field-font-size:var(--t-font-size-md);
3694
+ --tds-time-field-min-height:var(--t-container-size-md);
3695
+ --tds-time-field-padding-block:6px;
3696
+ --tds-time-field-description-color:var(--t-text-color-secondary);
3697
+ --tds-time-field-description-invalid-icon-display:none;
3699
3698
 
3700
3699
  position:relative;
3701
3700
  display:flex;
@@ -3703,291 +3702,135 @@ a[class="tds-btn"]{
3703
3702
  gap:var(--t-spacing-half);
3704
3703
  }
3705
3704
 
3706
- .tds-date-picker[data-required] .tds-date-picker-label::after{
3705
+ .tds-time-field[data-required] .tds-time-field-label::after{
3707
3706
  margin-left:.25ch;
3708
3707
  color:var(--t-text-color-status-error);
3709
3708
  content:"*";
3710
3709
  }
3711
3710
 
3712
- .tds-date-picker[data-invalid]{
3713
- --tds-date-picker-border-color:var(--t-form-border-color-error);
3714
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3715
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3716
- --tds-date-picker-background-color:var(--t-form-background-color-error);
3717
- --tds-date-picker-description-color:var(--t-text-color-status-error);
3718
- --tds-date-picker-description-invalid-icon-display:inline-block;
3711
+ .tds-time-field[data-invalid]{
3712
+ --tds-time-field-border-color:var(--t-form-border-color-error);
3713
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3714
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3715
+ --tds-time-field-background-color:var(--t-form-background-color-error);
3716
+ --tds-time-field-description-color:var(--t-text-color-status-error);
3717
+ --tds-time-field-description-invalid-icon-display:inline-block;
3719
3718
  }
3720
3719
 
3721
- .tds-date-picker[data-disabled]{
3722
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3723
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3724
- --tds-date-picker-color:var(--t-form-color-disabled);
3725
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3720
+ .tds-time-field[data-disabled]{
3721
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
3722
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
3723
+ --tds-time-field-color:var(--t-form-color-disabled);
3724
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3726
3725
  }
3727
3726
 
3728
- .tds-date-picker[data-disabled] .tds-date-picker-field{
3727
+ .tds-time-field[data-disabled] .tds-time-field-label{
3728
+ color:var(--t-form-color-disabled);
3729
+ }
3730
+
3731
+ .tds-time-field[data-disabled] .tds-time-field-input{
3729
3732
  cursor:not-allowed;
3730
3733
  }
3731
3734
 
3732
- .tds-date-picker--lg{
3733
- --tds-date-picker-min-height:var(--t-container-size-lg);
3734
- --tds-date-picker-font-size:var(--t-font-size-lg);
3735
- --tds-date-picker-button-offset:5px;
3735
+ .tds-time-field--lg{
3736
+ --tds-time-field-min-height:var(--t-container-size-lg);
3737
+ --tds-time-field-font-size:var(--t-font-size-lg);
3736
3738
  }
3737
3739
 
3738
- .tds-date-picker-label{
3740
+ .tds-time-field-label{
3739
3741
  font-size:var(--t-font-size-md);
3740
3742
  font-weight:var(--t-font-weight-normal);
3741
3743
  color:var(--t-text-color);
3742
3744
  cursor:default;
3743
3745
  }
3744
3746
 
3745
- .tds-date-picker-field{
3747
+ .tds-time-field-input{
3746
3748
  display:flex;
3747
3749
  align-items:center;
3748
3750
  inline-size:100%;
3749
- min-block-size:var(--tds-date-picker-min-height);
3751
+ min-block-size:var(--tds-time-field-min-height);
3752
+ padding-block:var(--tds-time-field-padding-block);
3753
+ padding-inline:var(--t-spacing-1);
3750
3754
  font-family:inherit;
3751
- font-size:var(--tds-date-picker-font-size);
3755
+ font-size:var(--tds-time-field-font-size);
3756
+ font-variant-numeric:tabular-nums;
3752
3757
  line-height:1;
3753
- color:var(--tds-date-picker-color);
3754
- -webkit-appearance:none;
3755
- -moz-appearance:none;
3756
- appearance:none;
3758
+ color:var(--tds-time-field-color);
3757
3759
  cursor:text;
3758
3760
  outline:var(--t-focus-ring-width) solid transparent;
3759
3761
  outline-offset:0;
3760
- background-color:var(--tds-date-picker-background-color);
3761
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3762
+ background-color:var(--tds-time-field-background-color);
3763
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3762
3764
  border-radius:var(--t-form-border-radius);
3763
3765
  }
3764
3766
 
3765
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3766
- border-color:var(--tds-date-picker-border-color-hover);
3767
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3768
+ border-color:var(--tds-time-field-border-color-hover);
3767
3769
  }
3768
3770
 
3769
- .tds-date-picker-field[data-focus-within]{
3771
+ .tds-time-field-input[data-focus-within]{
3770
3772
  outline-color:var(--t-focus-ring-color);
3771
3773
  outline-offset:var(--t-focus-ring-offset);
3772
- border-color:var(--tds-date-picker-border-color-active);
3774
+ border-color:var(--tds-time-field-border-color-active);
3773
3775
  }
3774
3776
 
3775
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3777
+ .tds-time-field-input[data-readonly]{
3776
3778
  color:var(--t-form-color-readonly);
3777
3779
  background-color:var(--t-form-background-color-readonly);
3778
3780
  border-color:var(--t-form-border-color-readonly);
3779
3781
  }
3780
3782
 
3781
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3783
+ .tds-time-field-input[data-readonly][data-hovered]{
3782
3784
  border-color:var(--t-form-border-color-readonly);
3783
3785
  }
3784
3786
 
3785
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3787
+ .tds-time-field-input[data-readonly][data-focus-within]{
3786
3788
  outline-color:var(--t-focus-ring-color);
3787
3789
  outline-offset:var(--t-focus-ring-offset);
3788
3790
  border-color:var(--t-form-border-color-hover);
3789
3791
  }
3790
3792
 
3791
- .tds-date-picker-input{
3792
- flex:1;
3793
- padding-block:var(--tds-date-picker-padding-block);
3794
- padding-inline-start:var(--t-spacing-1);
3793
+ .tds-time-field-segment{
3794
+ padding-inline:1px;
3795
3795
  font-variant-numeric:tabular-nums;
3796
- }
3797
-
3798
- .tds-date-picker-segment{
3799
- padding-inline:2px;
3796
+ cursor:text;
3800
3797
  caret-color:transparent;
3801
3798
  border-radius:var(--t-border-radius-sm);
3802
3799
  }
3803
3800
 
3804
- .tds-date-picker-segment[data-placeholder]{
3805
- color:var(--tds-date-picker-placeholder-color);
3801
+ .tds-time-field-segment[data-placeholder]{
3802
+ color:var(--tds-time-field-placeholder-color);
3806
3803
  }
3807
3804
 
3808
- .tds-date-picker-segment[data-focused]{
3805
+ .tds-time-field-segment[data-focused]{
3809
3806
  color:var(--t-text-color-inverted);
3810
3807
  outline:0;
3811
3808
  background:var(--t-fill-color-interaction);
3812
3809
  }
3813
3810
 
3814
- .tds-date-picker-segment-separator{
3811
+ .tds-time-field-segment-separator{
3815
3812
  padding-inline:0;
3816
- color:var(--tds-date-picker-placeholder-color);
3813
+ color:var(--tds-time-field-placeholder-color);
3817
3814
  }
3818
3815
 
3819
- .tds-date-picker-description{
3816
+ .tds-time-field-description{
3820
3817
  display:flex;
3821
3818
  gap:var(--t-spacing-half);
3822
3819
  align-items:flex-start;
3823
3820
  margin:0;
3824
3821
  font-size:var(--t-font-size-sm);
3825
3822
  line-height:1.35;
3826
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3823
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3827
3824
  cursor:text;
3828
3825
  }
3829
3826
 
3830
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3831
- display:var(--tds-date-picker-description-invalid-icon-display, none);
3827
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
3828
+ display:var(--tds-time-field-description-invalid-icon-display, none);
3832
3829
  flex-shrink:0;
3833
3830
  margin-block-start:calc(.5lh - .5em);
3834
3831
  line-height:1.35;
3835
3832
  }
3836
3833
 
3837
- .tds-date-picker-button{
3838
- flex-shrink:0;
3839
- align-self:center;
3840
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3841
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3842
- padding:0;
3843
- margin-inline-end:var(--tds-date-picker-button-offset);
3844
- }
3845
-
3846
- .tds-date-picker-popover{
3847
- padding:var(--t-spacing-2);
3848
- background:var(--t-surface-color-card);
3849
- border:1px solid var(--t-border-color);
3850
- border-radius:var(--t-border-radius);
3851
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3852
- }
3853
-
3854
- .tds-date-picker-popover[data-entering]{
3855
- animation:tds-date-picker-popover-enter 160ms ease;
3856
- }
3857
-
3858
- .tds-date-picker-popover[data-exiting]{
3859
- animation:tds-date-picker-popover-exit 130ms ease;
3860
- }
3861
-
3862
- @keyframes tds-date-picker-popover-enter{
3863
- from{
3864
- opacity:0;
3865
- transform:translateY(-8px);
3866
- }
3867
- }
3868
-
3869
- @keyframes tds-date-picker-popover-exit{
3870
- to{
3871
- opacity:0;
3872
- transform:translateY(-8px);
3873
- }
3874
- }
3875
-
3876
- @media (prefers-reduced-motion: reduce){
3877
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3878
- animation:none;
3879
- }
3880
- }
3881
-
3882
- .tds-date-picker-calendar{
3883
- inline-size:-moz-fit-content;
3884
- inline-size:fit-content;
3885
- }
3886
-
3887
- .tds-date-picker-calendar-header{
3888
- display:flex;
3889
- align-items:center;
3890
- justify-content:space-between;
3891
- padding-block-end:var(--t-spacing-1);
3892
- }
3893
-
3894
- .tds-date-picker-calendar-title{
3895
- flex:1;
3896
- margin:0;
3897
- font-size:var(--t-font-size-md);
3898
- font-weight:var(--t-font-weight-semibold);
3899
- text-align:center;
3900
- }
3901
-
3902
- .tds-date-picker-calendar-nav{
3903
- display:flex;
3904
- align-items:center;
3905
- justify-content:center;
3906
- padding:var(--t-spacing-half);
3907
- color:var(--t-text-color);
3908
- cursor:default;
3909
- outline:0;
3910
- background:transparent;
3911
- border:0;
3912
- border-radius:var(--t-border-radius-sm);
3913
- }
3914
-
3915
- .tds-date-picker-calendar-nav[data-hovered]{
3916
- background:var(--t-fill-color-neutral-070);
3917
- }
3918
-
3919
- .tds-date-picker-calendar-nav[data-pressed]{
3920
- background:var(--t-fill-color-button-interaction-ghost-active);
3921
- }
3922
-
3923
- .tds-date-picker-calendar-nav[data-focus-visible]{
3924
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3925
- outline-offset:var(--t-focus-ring-offset);
3926
- }
3927
-
3928
- .tds-date-picker-calendar-nav[data-disabled]{
3929
- color:var(--t-form-color-disabled);
3930
- cursor:not-allowed;
3931
- }
3932
-
3933
- .tds-date-picker-calendar-grid{
3934
- border-collapse:collapse;
3935
- }
3936
-
3937
- .tds-date-picker-calendar-header-cell{
3938
- padding-block:var(--t-spacing-half);
3939
- font-size:var(--t-font-size-sm);
3940
- font-weight:var(--t-font-weight-normal);
3941
- color:var(--t-text-color-secondary);
3942
- text-align:center;
3943
- }
3944
-
3945
- .tds-date-picker-calendar-cell{
3946
- display:flex;
3947
- align-items:center;
3948
- justify-content:center;
3949
- inline-size:2.25rem;
3950
- block-size:2.25rem;
3951
- font-size:var(--t-font-size-md);
3952
- color:var(--t-text-color);
3953
- cursor:default;
3954
- outline:0;
3955
- border-radius:var(--t-border-radius-sm);
3956
- }
3957
-
3958
- .tds-date-picker-calendar-cell[data-hovered]{
3959
- background:var(--t-fill-color-neutral-070);
3960
- }
3961
-
3962
- .tds-date-picker-calendar-cell[data-pressed]{
3963
- background:var(--t-fill-color-button-interaction-ghost-active);
3964
- }
3965
-
3966
- .tds-date-picker-calendar-cell[data-selected]{
3967
- color:var(--t-text-color-inverted);
3968
- background:var(--t-fill-color-interaction);
3969
- }
3970
-
3971
- .tds-date-picker-calendar-cell[data-focus-visible]{
3972
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3973
- outline-offset:var(--t-focus-ring-offset);
3974
- }
3975
-
3976
- .tds-date-picker-calendar-cell[data-unavailable]{
3977
- color:var(--t-text-color-secondary);
3978
- text-decoration:line-through;
3979
- cursor:not-allowed;
3980
- }
3981
-
3982
- .tds-date-picker-calendar-cell[data-disabled]{
3983
- color:var(--t-form-color-disabled);
3984
- cursor:not-allowed;
3985
- }
3986
-
3987
- .tds-date-picker-calendar-cell[data-outside-month]{
3988
- color:var(--t-text-color-secondary);
3989
- }
3990
-
3991
3834
  .tds-number-stepper{
3992
3835
  --tds-number-stepper-border-color:var(--t-form-border-color);
3993
3836
  --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
@@ -4141,18 +3984,19 @@ a[class="tds-btn"]{
4141
3984
  line-height:1.35;
4142
3985
  }
4143
3986
 
4144
- .tds-time-field{
4145
- --tds-time-field-border-color:var(--t-form-border-color);
4146
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4147
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4148
- --tds-time-field-background-color:var(--t-form-background-color);
4149
- --tds-time-field-color:var(--t-form-color);
4150
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4151
- --tds-time-field-font-size:var(--t-font-size-md);
4152
- --tds-time-field-min-height:var(--t-container-size-md);
4153
- --tds-time-field-padding-block:6px;
4154
- --tds-time-field-description-color:var(--t-text-color-secondary);
4155
- --tds-time-field-description-invalid-icon-display:none;
3987
+ .tds-date-picker{
3988
+ --tds-date-picker-border-color:var(--t-form-border-color);
3989
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3990
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3991
+ --tds-date-picker-background-color:var(--t-form-background-color);
3992
+ --tds-date-picker-color:var(--t-form-color);
3993
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3994
+ --tds-date-picker-font-size:var(--t-font-size-md);
3995
+ --tds-date-picker-min-height:var(--t-container-size-md);
3996
+ --tds-date-picker-padding-block:6px;
3997
+ --tds-date-picker-button-offset:4px;
3998
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3999
+ --tds-date-picker-description-invalid-icon-display:none;
4156
4000
 
4157
4001
  position:relative;
4158
4002
  display:flex;
@@ -4160,135 +4004,291 @@ a[class="tds-btn"]{
4160
4004
  gap:var(--t-spacing-half);
4161
4005
  }
4162
4006
 
4163
- .tds-time-field[data-required] .tds-time-field-label::after{
4007
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
4164
4008
  margin-left:.25ch;
4165
4009
  color:var(--t-text-color-status-error);
4166
4010
  content:"*";
4167
4011
  }
4168
4012
 
4169
- .tds-time-field[data-invalid]{
4170
- --tds-time-field-border-color:var(--t-form-border-color-error);
4171
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4172
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4173
- --tds-time-field-background-color:var(--t-form-background-color-error);
4174
- --tds-time-field-description-color:var(--t-text-color-status-error);
4175
- --tds-time-field-description-invalid-icon-display:inline-block;
4013
+ .tds-date-picker[data-invalid]{
4014
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
4015
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
4016
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
4017
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
4018
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
4019
+ --tds-date-picker-description-invalid-icon-display:inline-block;
4176
4020
  }
4177
4021
 
4178
- .tds-time-field[data-disabled]{
4179
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
4180
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
4181
- --tds-time-field-color:var(--t-form-color-disabled);
4182
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4022
+ .tds-date-picker[data-disabled]{
4023
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
4024
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
4025
+ --tds-date-picker-color:var(--t-form-color-disabled);
4026
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
4183
4027
  }
4184
4028
 
4185
- .tds-time-field[data-disabled] .tds-time-field-label{
4186
- color:var(--t-form-color-disabled);
4187
- }
4188
-
4189
- .tds-time-field[data-disabled] .tds-time-field-input{
4029
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
4190
4030
  cursor:not-allowed;
4191
4031
  }
4192
4032
 
4193
- .tds-time-field--lg{
4194
- --tds-time-field-min-height:var(--t-container-size-lg);
4195
- --tds-time-field-font-size:var(--t-font-size-lg);
4033
+ .tds-date-picker--lg{
4034
+ --tds-date-picker-min-height:var(--t-container-size-lg);
4035
+ --tds-date-picker-font-size:var(--t-font-size-lg);
4036
+ --tds-date-picker-button-offset:5px;
4196
4037
  }
4197
4038
 
4198
- .tds-time-field-label{
4039
+ .tds-date-picker-label{
4199
4040
  font-size:var(--t-font-size-md);
4200
4041
  font-weight:var(--t-font-weight-normal);
4201
4042
  color:var(--t-text-color);
4202
4043
  cursor:default;
4203
4044
  }
4204
4045
 
4205
- .tds-time-field-input{
4046
+ .tds-date-picker-field{
4206
4047
  display:flex;
4207
4048
  align-items:center;
4208
4049
  inline-size:100%;
4209
- min-block-size:var(--tds-time-field-min-height);
4210
- padding-block:var(--tds-time-field-padding-block);
4211
- padding-inline:var(--t-spacing-1);
4050
+ min-block-size:var(--tds-date-picker-min-height);
4212
4051
  font-family:inherit;
4213
- font-size:var(--tds-time-field-font-size);
4214
- font-variant-numeric:tabular-nums;
4052
+ font-size:var(--tds-date-picker-font-size);
4215
4053
  line-height:1;
4216
- color:var(--tds-time-field-color);
4054
+ color:var(--tds-date-picker-color);
4055
+ -webkit-appearance:none;
4056
+ -moz-appearance:none;
4057
+ appearance:none;
4217
4058
  cursor:text;
4218
4059
  outline:var(--t-focus-ring-width) solid transparent;
4219
4060
  outline-offset:0;
4220
- background-color:var(--tds-time-field-background-color);
4221
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4061
+ background-color:var(--tds-date-picker-background-color);
4062
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
4222
4063
  border-radius:var(--t-form-border-radius);
4223
4064
  }
4224
4065
 
4225
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4226
- border-color:var(--tds-time-field-border-color-hover);
4066
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4067
+ border-color:var(--tds-date-picker-border-color-hover);
4227
4068
  }
4228
4069
 
4229
- .tds-time-field-input[data-focus-within]{
4070
+ .tds-date-picker-field[data-focus-within]{
4230
4071
  outline-color:var(--t-focus-ring-color);
4231
4072
  outline-offset:var(--t-focus-ring-offset);
4232
- border-color:var(--tds-time-field-border-color-active);
4073
+ border-color:var(--tds-date-picker-border-color-active);
4233
4074
  }
4234
4075
 
4235
- .tds-time-field-input[data-readonly]{
4076
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
4236
4077
  color:var(--t-form-color-readonly);
4237
4078
  background-color:var(--t-form-background-color-readonly);
4238
4079
  border-color:var(--t-form-border-color-readonly);
4239
4080
  }
4240
4081
 
4241
- .tds-time-field-input[data-readonly][data-hovered]{
4082
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
4242
4083
  border-color:var(--t-form-border-color-readonly);
4243
4084
  }
4244
4085
 
4245
- .tds-time-field-input[data-readonly][data-focus-within]{
4086
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4246
4087
  outline-color:var(--t-focus-ring-color);
4247
4088
  outline-offset:var(--t-focus-ring-offset);
4248
4089
  border-color:var(--t-form-border-color-hover);
4249
4090
  }
4250
4091
 
4251
- .tds-time-field-segment{
4252
- padding-inline:1px;
4092
+ .tds-date-picker-input{
4093
+ flex:1;
4094
+ padding-block:var(--tds-date-picker-padding-block);
4095
+ padding-inline-start:var(--t-spacing-1);
4253
4096
  font-variant-numeric:tabular-nums;
4254
- cursor:text;
4097
+ }
4098
+
4099
+ .tds-date-picker-segment{
4100
+ padding-inline:2px;
4255
4101
  caret-color:transparent;
4256
4102
  border-radius:var(--t-border-radius-sm);
4257
4103
  }
4258
4104
 
4259
- .tds-time-field-segment[data-placeholder]{
4260
- color:var(--tds-time-field-placeholder-color);
4105
+ .tds-date-picker-segment[data-placeholder]{
4106
+ color:var(--tds-date-picker-placeholder-color);
4261
4107
  }
4262
4108
 
4263
- .tds-time-field-segment[data-focused]{
4109
+ .tds-date-picker-segment[data-focused]{
4264
4110
  color:var(--t-text-color-inverted);
4265
4111
  outline:0;
4266
4112
  background:var(--t-fill-color-interaction);
4267
4113
  }
4268
4114
 
4269
- .tds-time-field-segment-separator{
4115
+ .tds-date-picker-segment-separator{
4270
4116
  padding-inline:0;
4271
- color:var(--tds-time-field-placeholder-color);
4117
+ color:var(--tds-date-picker-placeholder-color);
4272
4118
  }
4273
4119
 
4274
- .tds-time-field-description{
4120
+ .tds-date-picker-description{
4275
4121
  display:flex;
4276
4122
  gap:var(--t-spacing-half);
4277
4123
  align-items:flex-start;
4278
4124
  margin:0;
4279
4125
  font-size:var(--t-font-size-sm);
4280
4126
  line-height:1.35;
4281
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4127
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
4282
4128
  cursor:text;
4283
4129
  }
4284
4130
 
4285
- .tds-time-field-description .tds-time-field-description-invalid-icon{
4286
- display:var(--tds-time-field-description-invalid-icon-display, none);
4131
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
4132
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
4287
4133
  flex-shrink:0;
4288
4134
  margin-block-start:calc(.5lh - .5em);
4289
4135
  line-height:1.35;
4290
4136
  }
4291
4137
 
4138
+ .tds-date-picker-button{
4139
+ flex-shrink:0;
4140
+ align-self:center;
4141
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4142
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4143
+ padding:0;
4144
+ margin-inline-end:var(--tds-date-picker-button-offset);
4145
+ }
4146
+
4147
+ .tds-date-picker-popover{
4148
+ padding:var(--t-spacing-2);
4149
+ background:var(--t-surface-color-card);
4150
+ border:1px solid var(--t-border-color);
4151
+ border-radius:var(--t-border-radius);
4152
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4153
+ }
4154
+
4155
+ .tds-date-picker-popover[data-entering]{
4156
+ animation:tds-date-picker-popover-enter 160ms ease;
4157
+ }
4158
+
4159
+ .tds-date-picker-popover[data-exiting]{
4160
+ animation:tds-date-picker-popover-exit 130ms ease;
4161
+ }
4162
+
4163
+ @keyframes tds-date-picker-popover-enter{
4164
+ from{
4165
+ opacity:0;
4166
+ transform:translateY(-8px);
4167
+ }
4168
+ }
4169
+
4170
+ @keyframes tds-date-picker-popover-exit{
4171
+ to{
4172
+ opacity:0;
4173
+ transform:translateY(-8px);
4174
+ }
4175
+ }
4176
+
4177
+ @media (prefers-reduced-motion: reduce){
4178
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
4179
+ animation:none;
4180
+ }
4181
+ }
4182
+
4183
+ .tds-date-picker-calendar{
4184
+ inline-size:-moz-fit-content;
4185
+ inline-size:fit-content;
4186
+ }
4187
+
4188
+ .tds-date-picker-calendar-header{
4189
+ display:flex;
4190
+ align-items:center;
4191
+ justify-content:space-between;
4192
+ padding-block-end:var(--t-spacing-1);
4193
+ }
4194
+
4195
+ .tds-date-picker-calendar-title{
4196
+ flex:1;
4197
+ margin:0;
4198
+ font-size:var(--t-font-size-md);
4199
+ font-weight:var(--t-font-weight-semibold);
4200
+ text-align:center;
4201
+ }
4202
+
4203
+ .tds-date-picker-calendar-nav{
4204
+ display:flex;
4205
+ align-items:center;
4206
+ justify-content:center;
4207
+ padding:var(--t-spacing-half);
4208
+ color:var(--t-text-color);
4209
+ cursor:default;
4210
+ outline:0;
4211
+ background:transparent;
4212
+ border:0;
4213
+ border-radius:var(--t-border-radius-sm);
4214
+ }
4215
+
4216
+ .tds-date-picker-calendar-nav[data-hovered]{
4217
+ background:var(--t-fill-color-neutral-070);
4218
+ }
4219
+
4220
+ .tds-date-picker-calendar-nav[data-pressed]{
4221
+ background:var(--t-fill-color-button-interaction-ghost-active);
4222
+ }
4223
+
4224
+ .tds-date-picker-calendar-nav[data-focus-visible]{
4225
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4226
+ outline-offset:var(--t-focus-ring-offset);
4227
+ }
4228
+
4229
+ .tds-date-picker-calendar-nav[data-disabled]{
4230
+ color:var(--t-form-color-disabled);
4231
+ cursor:not-allowed;
4232
+ }
4233
+
4234
+ .tds-date-picker-calendar-grid{
4235
+ border-collapse:collapse;
4236
+ }
4237
+
4238
+ .tds-date-picker-calendar-header-cell{
4239
+ padding-block:var(--t-spacing-half);
4240
+ font-size:var(--t-font-size-sm);
4241
+ font-weight:var(--t-font-weight-normal);
4242
+ color:var(--t-text-color-secondary);
4243
+ text-align:center;
4244
+ }
4245
+
4246
+ .tds-date-picker-calendar-cell{
4247
+ display:flex;
4248
+ align-items:center;
4249
+ justify-content:center;
4250
+ inline-size:2.25rem;
4251
+ block-size:2.25rem;
4252
+ font-size:var(--t-font-size-md);
4253
+ color:var(--t-text-color);
4254
+ cursor:default;
4255
+ outline:0;
4256
+ border-radius:var(--t-border-radius-sm);
4257
+ }
4258
+
4259
+ .tds-date-picker-calendar-cell[data-hovered]{
4260
+ background:var(--t-fill-color-neutral-070);
4261
+ }
4262
+
4263
+ .tds-date-picker-calendar-cell[data-pressed]{
4264
+ background:var(--t-fill-color-button-interaction-ghost-active);
4265
+ }
4266
+
4267
+ .tds-date-picker-calendar-cell[data-selected]{
4268
+ color:var(--t-text-color-inverted);
4269
+ background:var(--t-fill-color-interaction);
4270
+ }
4271
+
4272
+ .tds-date-picker-calendar-cell[data-focus-visible]{
4273
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4274
+ outline-offset:var(--t-focus-ring-offset);
4275
+ }
4276
+
4277
+ .tds-date-picker-calendar-cell[data-unavailable]{
4278
+ color:var(--t-text-color-secondary);
4279
+ text-decoration:line-through;
4280
+ cursor:not-allowed;
4281
+ }
4282
+
4283
+ .tds-date-picker-calendar-cell[data-disabled]{
4284
+ color:var(--t-form-color-disabled);
4285
+ cursor:not-allowed;
4286
+ }
4287
+
4288
+ .tds-date-picker-calendar-cell[data-outside-month]{
4289
+ color:var(--t-text-color-secondary);
4290
+ }
4291
+
4292
4292
  .t-banner{
4293
4293
  --t-banner-font-size:var(--t-font-size-md);
4294
4294
  --t-banner-font-color:var(--t-text-color);