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

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 (9) hide show
  1. package/dist/index.css +2 -0
  2. package/dist/index.css.map +1 -1
  3. package/dist/reactRender.css +771 -769
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +771 -769
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/unstable.css +2 -0
  8. package/dist/unstable.css.map +1 -1
  9. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,3 +1,290 @@
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
4
+ }
5
+ }
6
+
7
+ @layer t-component{
8
+ .tds-page-header{
9
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
+ --tds-page-header-color:var(--t-text-color);
12
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
13
+ --tds-page-header-headline-color:var(--t-text-color-headline);
14
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
+ --tds-page-header-padding-x:var(--t-spacing-2);
16
+ --tds-page-header-padding-y:var(--t-spacing-2);
17
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
+ --tds-page-header-nav-gap:var(--t-spacing-1);
19
+ --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%);
20
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
+ --tds-page-header-nav-item-border-width:1px;
25
+
26
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
28
+
29
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
32
+
33
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
35
+
36
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
39
+
40
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
45
+ }
46
+
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
49
+ }
50
+
51
+ @supports (color: light-dark(#fff, #000)){
52
+ .tds-page-header{
53
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
55
+ }
56
+ }
57
+
58
+ @media (min-width: 600px){
59
+ .tds-page-header{
60
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
61
+ --tds-page-header-color:var(--t-text-color-secondary);
62
+ --tds-page-header-bottom-border-color:var(--t-border-color);
63
+ --tds-page-header-padding-x:var(--t-spacing-3);
64
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
+ --tds-page-header-nav-gap:var(--t-spacing-half);
66
+ --tds-page-header-nav-background:transparent;
67
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
+ --tds-page-header-nav-item-border-width:1px;
69
+ --tds-page-header-nav-item-color:var(--t-text-color);
70
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
72
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
75
+ }
76
+ }
77
+ }
78
+
79
+ .tds-page-header{
80
+ display:flex;
81
+ flex-direction:column;
82
+ padding-top:var(--tds-page-header-padding-y);
83
+ color:var(--tds-page-header-color);
84
+ background:var(--tds-page-header-background-color);
85
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
86
+ }
87
+
88
+ .tds-page-header:not(.has-nav){
89
+ padding-bottom:var(--tds-page-header-padding-y);
90
+ }
91
+
92
+ .tds-page-header.inactive{
93
+ background:var(--tds-page-header-background-color-inactive);
94
+ }
95
+
96
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
+ width:100%;
98
+ }
99
+
100
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
101
+ display:flex;
102
+ flex-flow:row wrap;
103
+ gap:var(--t-spacing-half) var(--t-spacing-1);
104
+ align-items:flex-start;
105
+ justify-content:flex-start;
106
+ min-width:0;
107
+ }
108
+
109
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
110
+ display:flex;
111
+ gap:var(--tds-page-header-nav-gap);
112
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
113
+ margin:0 0 -1px;
114
+ overflow:auto;
115
+ list-style:none;
116
+ background:var(--tds-page-header-nav-background);
117
+ }
118
+
119
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
120
+ position:relative;
121
+ display:inline-flex;
122
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
123
+ font-size:var(--t-font-size-sm);
124
+ line-height:22px;
125
+ color:var(--tds-page-header-nav-item-color);
126
+ white-space:nowrap;
127
+ text-decoration:none;
128
+ -webkit-appearance:none;
129
+ -moz-appearance:none;
130
+ appearance:none;
131
+ cursor:pointer;
132
+ outline-offset:-2px;
133
+ background-color:var(--tds-page-header-nav-item-background-color);
134
+ background-clip:padding-box;
135
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
138
+ }
139
+
140
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
141
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
142
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
143
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
144
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
145
+ }
146
+
147
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
148
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
149
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
150
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
151
+ }
152
+
153
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
154
+ background-color:var(--tds-page-header-nav-item-background-color-active);
155
+ border-color:var(--tds-page-header-nav-item-border-color-active);
156
+ }
157
+
158
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
159
+ color:var(--tds-page-header-nav-item-color-disabled);
160
+ cursor:not-allowed;
161
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
162
+ opacity:1;
163
+ }
164
+
165
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
+ position:relative;
167
+ }
168
+
169
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
170
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
171
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
172
+ }
173
+
174
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
175
+ position:absolute;
176
+ top:-5px;
177
+ right:-2px;
178
+ width:10px;
179
+ height:10px;
180
+ content:"";
181
+ background:var(--tds-page-header-nav-item-indicator-color);
182
+ border-radius:50%;
183
+ }
184
+
185
+ @media (prefers-reduced-motion: no-preference){
186
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
187
+ animation:indicator-pulse 1.25s ease infinite;
188
+ }
189
+ }
190
+
191
+ .tds-page-header__title-bar{
192
+ display:flex;
193
+ flex-direction:column;
194
+ gap:var(--t-spacing-2) var(--t-spacing-1);
195
+ align-items:flex-start;
196
+ justify-content:space-between;
197
+ padding:0 var(--tds-page-header-padding-x);
198
+ }
199
+
200
+ .tds-page-header--profile > .tds-page-header__title-bar{
201
+ align-items:center;
202
+ }
203
+
204
+ .tds-page-header__primary{
205
+ width:100%;
206
+ }
207
+
208
+ .tds-page-header__primary h1{
209
+ margin:0;
210
+ font-size:var(--tds-page-header-headline-font-size);
211
+ font-weight:var(--t-font-weight-normal);
212
+ line-height:32px;
213
+ color:var(--tds-page-header-headline-color);
214
+ overflow-wrap:break-word;
215
+ }
216
+
217
+ @media (min-width: 960px){
218
+ .tds-page-header__primary{
219
+ flex:1 1 max-content;
220
+ width:auto;
221
+ min-width:0;
222
+ max-width:100%;
223
+ }
224
+
225
+ .tds-page-header__title-bar,
226
+ .tds-page-header--profile .tds-page-header__title-bar{
227
+ flex-flow:row nowrap;
228
+ row-gap:12px;
229
+ align-items:flex-start;
230
+ }
231
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
+ width:auto;
233
+ }
234
+
235
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
+ justify-content:flex-end;
237
+ }
238
+ }
239
+
240
+ .tds-page-header-phone,
241
+ .tds-page-header-email{
242
+ color:var(--tds-page-header-color);
243
+ white-space:nowrap;
244
+ }
245
+
246
+ .tds-page-header-email{
247
+ max-width:100%;
248
+ overflow:hidden;
249
+ text-overflow:ellipsis;
250
+ }
251
+
252
+ @keyframes indicator-pulse{
253
+ 0%{
254
+ opacity:.3;
255
+ transform:scale(.9);
256
+ }
257
+
258
+ 100%{
259
+ opacity:0;
260
+ transform:scale(1.75);
261
+ }
262
+ }
263
+
264
+
265
+ :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{
266
+ -webkit-appearance:none;
267
+ appearance:none;
268
+ }
269
+
270
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
271
+ inline-size:1em;
272
+ block-size:2em;
273
+ }
274
+
275
+ @supports (field-sizing: content){
276
+ .tds-input--auto-width{
277
+ inline-size:-moz-fit-content;
278
+ inline-size:fit-content;
279
+ min-inline-size:min(100%, 122px);
280
+ }
281
+
282
+ .tds-input--auto-width input{
283
+ field-sizing:content;
284
+ inline-size:auto;
285
+ }
286
+ }
287
+
1
288
 
2
289
  @media (prefers-reduced-motion: no-preference){
3
290
 
@@ -360,267 +647,136 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
360
647
  flex-direction:column;
361
648
  }
362
649
 
363
- @layer t-critical{
364
- tds-page-header:not(.hydrated){
365
- display:none;
366
- }
367
- }
368
-
369
- @layer t-component{
370
- .tds-page-header{
371
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
372
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
373
- --tds-page-header-color:var(--t-text-color);
374
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
375
- --tds-page-header-headline-color:var(--t-text-color-headline);
376
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
377
- --tds-page-header-padding-x:var(--t-spacing-2);
378
- --tds-page-header-padding-y:var(--t-spacing-2);
379
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
380
- --tds-page-header-nav-gap:var(--t-spacing-1);
381
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
382
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
383
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
384
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
385
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
386
- --tds-page-header-nav-item-border-width:1px;
387
-
388
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
389
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
390
-
391
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
392
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
393
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
394
-
395
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
396
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
397
-
398
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
399
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
400
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
401
-
402
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
403
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
404
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
405
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
406
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
407
- }
650
+ .tds-radio{
651
+ --tds-radio-font-size:var(--t-font-size-md);
652
+ --tds-radio-cursor:pointer;
653
+ --tds-radio-line-height:1.4;
654
+ --tds-radio-transition-property:border-width;
408
655
 
409
- .tds-page-header--profile{
410
- --tds-page-header-padding-y:20px;
411
- }
656
+ --tds-radio-input-size:var(--t-element-size-md);
657
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
658
+ --tds-radio-input-border-color:var(--t-form-border-color);
659
+ --tds-radio-input-border-width:var(--t-form-border-width);
660
+ --tds-radio-input-background-color:transparent;
412
661
 
413
- @supports (color: light-dark(#fff, #000)){
414
- .tds-page-header{
415
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
416
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
417
- }
418
- }
662
+ --tds-radio-label-color:var(--t-form-color);
419
663
 
420
- @media (min-width: 600px){
421
- .tds-page-header{
422
- --tds-page-header-background-color:var(--t-surface-color-canvas);
423
- --tds-page-header-color:var(--t-text-color-secondary);
424
- --tds-page-header-bottom-border-color:var(--t-border-color);
425
- --tds-page-header-padding-x:var(--t-spacing-3);
426
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
427
- --tds-page-header-nav-gap:var(--t-spacing-half);
428
- --tds-page-header-nav-background:transparent;
429
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
430
- --tds-page-header-nav-item-border-width:1px;
431
- --tds-page-header-nav-item-color:var(--t-text-color);
432
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
433
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
434
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
435
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
436
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
437
- }
438
- }
439
- }
664
+ --tds-radio-description-font-size:var(--t-font-size-sm);
665
+ --tds-radio-description-line-height:1.35;
666
+ --tds-radio-description-color:var(--t-text-color-secondary);
440
667
 
441
- .tds-page-header{
442
- display:flex;
443
- flex-direction:column;
444
- padding-top:var(--tds-page-header-padding-y);
445
- color:var(--tds-page-header-color);
446
- background:var(--tds-page-header-background-color);
447
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
668
+ position:relative;
669
+ display:inline-grid;
670
+ grid-template-columns:auto;
671
+ grid-auto-columns:1fr;
672
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
673
+ line-height:var(--tds-radio-line-height);
674
+ cursor:var(--tds-radio-cursor);
675
+ -webkit-user-select:none;
676
+ -moz-user-select:none;
677
+ user-select:none;
448
678
  }
449
679
 
450
- .tds-page-header:not(.has-nav){
451
- padding-bottom:var(--tds-page-header-padding-y);
452
- }
453
-
454
- .tds-page-header.inactive{
455
- background:var(--tds-page-header-background-color-inactive);
456
- }
457
-
458
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
459
- width:100%;
680
+ .tds-radio label{
681
+ grid-area:1 / 2;
682
+ font-size:var(--tds-radio-font-size);
683
+ font-weight:var(--t-font-weight-normal);
684
+ color:var(--tds-radio-label-color);
685
+ cursor:var(--tds-radio-cursor);
460
686
  }
461
687
 
462
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
463
- display:flex;
464
- flex-flow:row wrap;
465
- gap:var(--t-spacing-half) var(--t-spacing-1);
466
- align-items:flex-start;
467
- justify-content:flex-start;
468
- min-width:0;
688
+ .tds-radio input[type="radio"]{
689
+ position:relative;
690
+ width:1em;
691
+ height:1em;
692
+ margin:calc((1lh - 1em) / 2) 0 0;
693
+ font-size:var(--tds-radio-font-size);
694
+ line-height:inherit;
695
+ -webkit-appearance:none;
696
+ -moz-appearance:none;
697
+ appearance:none;
698
+ cursor:var(--tds-radio-cursor);
699
+ background-color:var(--tds-radio-input-background-color);
700
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
701
+ border-radius:var(--tds-radio-input-border-radius);
702
+ transition-timing-function:var(--t-ease-in-out);
703
+ transition-duration:var(--t-duration-200);
704
+ transition-property:var(--tds-radio-transition-property);
469
705
  }
470
706
 
471
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
472
- display:flex;
473
- gap:var(--tds-page-header-nav-gap);
474
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
475
- margin:0 0 -1px;
476
- overflow:auto;
477
- list-style:none;
478
- background:var(--tds-page-header-nav-background);
479
- }
480
-
481
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
482
- position:relative;
483
- display:inline-flex;
484
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
485
- font-size:var(--t-font-size-sm);
486
- line-height:22px;
487
- color:var(--tds-page-header-nav-item-color);
488
- white-space:nowrap;
489
- text-decoration:none;
490
- -webkit-appearance:none;
491
- -moz-appearance:none;
492
- appearance:none;
493
- cursor:pointer;
494
- outline-offset:-2px;
495
- background-color:var(--tds-page-header-nav-item-background-color);
496
- background-clip:padding-box;
497
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
498
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
499
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
500
- }
501
-
502
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
503
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
504
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
505
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
506
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
507
- }
508
-
509
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
510
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
511
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
512
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
513
- }
514
-
515
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
516
- background-color:var(--tds-page-header-nav-item-background-color-active);
517
- border-color:var(--tds-page-header-nav-item-border-color-active);
518
- }
519
-
520
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
521
- color:var(--tds-page-header-nav-item-color-disabled);
522
- cursor:not-allowed;
523
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
524
- opacity:1;
525
- }
526
-
527
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
528
- position:relative;
529
- }
530
-
531
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
532
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
533
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
534
- }
535
-
536
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
537
- position:absolute;
538
- top:-5px;
539
- right:-2px;
540
- width:10px;
541
- height:10px;
542
- content:"";
543
- background:var(--tds-page-header-nav-item-indicator-color);
544
- border-radius:50%;
545
- }
546
-
547
- @media (prefers-reduced-motion: no-preference){
548
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
549
- animation:indicator-pulse 1.25s ease infinite;
550
- }
551
- }
552
-
553
- .tds-page-header__title-bar{
554
- display:flex;
555
- flex-direction:column;
556
- gap:var(--t-spacing-2) var(--t-spacing-1);
557
- align-items:flex-start;
558
- justify-content:space-between;
559
- padding:0 var(--tds-page-header-padding-x);
560
- }
707
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
708
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
709
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
710
+ }
561
711
 
562
- .tds-page-header--profile > .tds-page-header__title-bar{
563
- align-items:center;
564
- }
712
+ :is(.tds-radio input[type="radio"]):focus-visible{
713
+ outline:var(--t-focus-ring-outline);
714
+ outline-offset:var(--t-focus-ring-offset);
715
+ }
565
716
 
566
- .tds-page-header__primary{
567
- width:100%;
568
- }
717
+ :is(.tds-radio input[type="radio"]):disabled{
718
+ pointer-events:none;
719
+ }
569
720
 
570
- .tds-page-header__primary h1{
571
- margin:0;
572
- font-size:var(--tds-page-header-headline-font-size);
573
- font-weight:var(--t-font-weight-normal);
574
- line-height:32px;
575
- color:var(--tds-page-header-headline-color);
576
- overflow-wrap:break-word;
577
- }
721
+ @media (prefers-reduced-motion: reduce){
578
722
 
579
- @media (min-width: 960px){
580
- .tds-page-header__primary{
581
- flex:1 1 max-content;
582
- width:auto;
583
- min-width:0;
584
- max-width:100%;
723
+ .tds-radio input[type="radio"]{
724
+ --tds-radio-transition-property:none;
585
725
  }
726
+ }
586
727
 
587
- .tds-page-header__title-bar,
588
- .tds-page-header--profile .tds-page-header__title-bar{
589
- flex-flow:row nowrap;
590
- row-gap:12px;
591
- align-items:flex-start;
728
+ .tds-radio:has(input:checked){
729
+ --tds-radio-input-background-color:var(--t-form-background-color);
730
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
731
+ --tds-radio-input-border-width:4px;
592
732
  }
593
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
594
- width:auto;
595
- }
596
733
 
597
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
598
- justify-content:flex-end;
734
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
735
+ --tds-radio-input-background-color:var(--t-form-background-color);
736
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
599
737
  }
600
- }
601
738
 
602
- .tds-page-header-phone,
603
- .tds-page-header-email{
604
- color:var(--tds-page-header-color);
605
- white-space:nowrap;
606
- }
739
+ .tds-radio:has(input:user-invalid){
740
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
741
+ }
607
742
 
608
- .tds-page-header-email{
609
- max-width:100%;
610
- overflow:hidden;
611
- text-overflow:ellipsis;
612
- }
743
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
744
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
745
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
746
+ }
613
747
 
614
- @keyframes indicator-pulse{
615
- 0%{
616
- opacity:.3;
617
- transform:scale(.9);
618
- }
748
+ .tds-radio:has(input:disabled){
749
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
750
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
619
751
 
620
- 100%{
621
- opacity:0;
622
- transform:scale(1.75);
752
+ --tds-radio-label-color:var(--t-form-color-disabled);
753
+ --tds-radio-description-color:var(--t-form-color-disabled);
754
+ --tds-radio-cursor:not-allowed;
623
755
  }
756
+
757
+ .tds-radio:has(input:disabled) input:checked{
758
+ --tds-radio-input-background-color:var(--t-form-background-color);
759
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
760
+ }
761
+
762
+ .tds-radio-description{
763
+ display:flex;
764
+ grid-area:2 / 2;
765
+ gap:var(--t-spacing-half);
766
+ align-items:flex-start;
767
+ margin:0;
768
+ font-size:var(--tds-radio-description-font-size);
769
+ line-height:var(--tds-radio-description-line-height);
770
+ color:var(--tds-radio-description-color);
771
+ cursor:text;
772
+ }
773
+
774
+ .tds-radio--sm{
775
+ --tds-radio-line-height:1.35;
776
+ --tds-radio-input-size:var(--t-element-size-sm);
777
+ --tds-radio-font-size:var(--t-font-size-sm);
778
+ --tds-radio-description-font-size:var(--t-font-size-xs);
779
+ --tds-radio-description-line-height:1.3;
624
780
  }
625
781
 
626
782
  .tds-radio-group{
@@ -710,30 +866,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
710
866
  --tds-radio-group-description-line-height:1.3;
711
867
  }
712
868
 
713
-
714
- :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{
715
- -webkit-appearance:none;
716
- appearance:none;
717
- }
718
-
719
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
720
- inline-size:1em;
721
- block-size:2em;
722
- }
723
-
724
- @supports (field-sizing: content){
725
- .tds-input--auto-width{
726
- inline-size:-moz-fit-content;
727
- inline-size:fit-content;
728
- min-inline-size:min(100%, 122px);
729
- }
730
-
731
- .tds-input--auto-width input{
732
- field-sizing:content;
733
- inline-size:auto;
734
- }
735
- }
736
-
737
869
  .tds-checkbox{
738
870
  --tds-checkbox-font-size:var(--t-font-size-md);
739
871
  --tds-checkbox-cursor:pointer;
@@ -908,131 +1040,26 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
908
1040
  align-items:flex-start;
909
1041
  margin:0;
910
1042
  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;
914
- }
915
-
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);
921
- }
922
-
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
- }
930
-
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
- }
936
-
937
- @supports (x: attr(x type(*))){
938
-
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
- }
942
- }
943
-
944
- .tds-input.tds-textarea--resize-vertical textarea{
945
- resize:vertical;
946
- }
947
-
948
- .tds-input.tds-textarea--resize-none textarea{
949
- resize:none;
950
- }
951
-
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;
960
- }
961
- }
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;
985
- }
986
-
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);
1005
- }
1006
-
1007
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1008
- background:var(--tds-input-scrollbar-surface-color);
1009
- }
1010
-
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);
1015
- }
1016
-
1017
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1018
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1019
- cursor:default;
1020
- }
1021
-
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
- }
1043
+ line-height:var(--tds-checkbox-description-line-height);
1044
+ color:var(--tds-checkbox-description-color);
1045
+ cursor:text;
1046
+ }
1027
1047
 
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
- }
1033
- }
1048
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1049
+ display:var(--tds-checkbox-description-invalid-icon-display);
1050
+ flex-shrink:0;
1051
+ margin-top:calc(.5lh - .5em);
1052
+ line-height:var(--tds-checkbox-description-line-height);
1034
1053
  }
1035
1054
 
1055
+ .tds-checkbox--sm{
1056
+ --tds-checkbox-line-height:1.35;
1057
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1058
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1059
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1060
+ --tds-checkbox-description-line-height:1.3;
1061
+ }
1062
+
1036
1063
  .tds-toggle-switch{
1037
1064
  --tds-toggle-switch-font-size:var(--t-font-size-md);
1038
1065
  --tds-toggle-switch-column-gap:var(--t-spacing-1);
@@ -1174,137 +1201,110 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1174
1201
  --tds-toggle-switch-display:inline-flex;
1175
1202
  }
1176
1203
 
1177
- .tds-radio{
1178
- --tds-radio-font-size:var(--t-font-size-md);
1179
- --tds-radio-cursor:pointer;
1180
- --tds-radio-line-height:1.4;
1181
- --tds-radio-transition-property:border-width;
1182
-
1183
- --tds-radio-input-size:var(--t-element-size-md);
1184
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1185
- --tds-radio-input-border-color:var(--t-form-border-color);
1186
- --tds-radio-input-border-width:var(--t-form-border-width);
1187
- --tds-radio-input-background-color:transparent;
1188
-
1189
- --tds-radio-label-color:var(--t-form-color);
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
+ }
1190
1209
 
1191
- --tds-radio-description-font-size:var(--t-font-size-sm);
1192
- --tds-radio-description-line-height:1.35;
1193
- --tds-radio-description-color:var(--t-text-color-secondary);
1210
+ @supports (x: attr(x type(*))){
1194
1211
 
1195
- position:relative;
1196
- display:inline-grid;
1197
- grid-template-columns:auto;
1198
- grid-auto-columns:1fr;
1199
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1200
- line-height:var(--tds-radio-line-height);
1201
- cursor:var(--tds-radio-cursor);
1202
- -webkit-user-select:none;
1203
- -moz-user-select:none;
1204
- user-select:none;
1212
+ .tds-input:has(textarea){
1213
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1205
1214
  }
1206
-
1207
- .tds-radio label{
1208
- grid-area:1 / 2;
1209
- font-size:var(--tds-radio-font-size);
1210
- font-weight:var(--t-font-weight-normal);
1211
- color:var(--tds-radio-label-color);
1212
- cursor:var(--tds-radio-cursor);
1213
1215
  }
1214
1216
 
1215
- .tds-radio input[type="radio"]{
1216
- position:relative;
1217
- width:1em;
1218
- height:1em;
1219
- margin:calc((1lh - 1em) / 2) 0 0;
1220
- font-size:var(--tds-radio-font-size);
1221
- line-height:inherit;
1222
- -webkit-appearance:none;
1223
- -moz-appearance:none;
1224
- appearance:none;
1225
- cursor:var(--tds-radio-cursor);
1226
- background-color:var(--tds-radio-input-background-color);
1227
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1228
- border-radius:var(--tds-radio-input-border-radius);
1229
- transition-timing-function:var(--t-ease-in-out);
1230
- transition-duration:var(--t-duration-200);
1231
- transition-property:var(--tds-radio-transition-property);
1232
- }
1217
+ .tds-input.tds-textarea--resize-vertical textarea{
1218
+ resize:vertical;
1219
+ }
1233
1220
 
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);
1221
+ .tds-input.tds-textarea--resize-none textarea{
1222
+ resize:none;
1237
1223
  }
1238
1224
 
1239
- :is(.tds-radio input[type="radio"]):focus-visible{
1240
- outline:var(--t-focus-ring-outline);
1241
- outline-offset:var(--t-focus-ring-offset);
1225
+ .tds-input.tds-textarea--resize-auto textarea{
1226
+ resize:vertical;
1242
1227
  }
1243
1228
 
1244
- :is(.tds-radio input[type="radio"]):disabled{
1245
- pointer-events:none;
1229
+ @supports (field-sizing: content){
1230
+ .tds-input.tds-textarea--resize-auto textarea{
1231
+ field-sizing:content;
1232
+ resize:none;
1233
+ }
1246
1234
  }
1247
1235
 
1248
- @media (prefers-reduced-motion: reduce){
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
+ }
1249
1252
 
1250
- .tds-radio input[type="radio"]{
1251
- --tds-radio-transition-property:none;
1252
- }
1253
+ @media (pointer: fine){
1254
+ :is(.tds-input textarea)::-webkit-scrollbar{
1255
+ width:12px;
1256
+ height:12px;
1257
+ cursor:default;
1253
1258
  }
1254
1259
 
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
- }
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);
1266
+ }
1260
1267
 
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);
1268
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1269
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1264
1270
  }
1265
1271
 
1266
- .tds-radio:has(input:user-invalid){
1267
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1268
- }
1272
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1273
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1274
+ }
1269
1275
 
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);
1276
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1277
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1273
1278
  }
1274
1279
 
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);
1280
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1281
+ background:var(--tds-input-scrollbar-surface-color);
1282
+ }
1278
1283
 
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;
1282
- }
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
+ }
1283
1289
 
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);
1290
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1291
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1292
+ cursor:default;
1287
1293
  }
1288
1294
 
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
- }
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
+ }
1300
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
- }
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
+ }
1306
+ }
1307
+ }
1308
1308
 
1309
1309
  .tds-select{
1310
1310
  --tds-select-border-color:var(--t-form-border-color);
@@ -1616,6 +1616,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1616
1616
  overflow:auto;
1617
1617
  overflow-x:hidden;
1618
1618
  scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1619
+ overscroll-behavior:none;
1619
1620
  -webkit-user-select:none;
1620
1621
  -moz-user-select:none;
1621
1622
  user-select:none;
@@ -1712,6 +1713,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1712
1713
  overflow:auto;
1713
1714
  overflow-x:hidden;
1714
1715
  scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1716
+ overscroll-behavior:none;
1715
1717
  -webkit-user-select:none;
1716
1718
  -moz-user-select:none;
1717
1719
  user-select:none;
@@ -3681,19 +3683,18 @@ a[class="tds-btn"]{
3681
3683
  line-height:1.35;
3682
3684
  }
3683
3685
 
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;
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;
3697
3698
 
3698
3699
  position:relative;
3699
3700
  display:flex;
@@ -3701,291 +3702,135 @@ a[class="tds-btn"]{
3701
3702
  gap:var(--t-spacing-half);
3702
3703
  }
3703
3704
 
3704
- .tds-date-picker[data-required] .tds-date-picker-label::after{
3705
+ .tds-time-field[data-required] .tds-time-field-label::after{
3705
3706
  margin-left:.25ch;
3706
3707
  color:var(--t-text-color-status-error);
3707
3708
  content:"*";
3708
3709
  }
3709
3710
 
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;
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;
3717
3718
  }
3718
3719
 
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);
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);
3724
3725
  }
3725
3726
 
3726
- .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{
3727
3732
  cursor:not-allowed;
3728
3733
  }
3729
3734
 
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;
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);
3734
3738
  }
3735
3739
 
3736
- .tds-date-picker-label{
3740
+ .tds-time-field-label{
3737
3741
  font-size:var(--t-font-size-md);
3738
3742
  font-weight:var(--t-font-weight-normal);
3739
3743
  color:var(--t-text-color);
3740
3744
  cursor:default;
3741
3745
  }
3742
3746
 
3743
- .tds-date-picker-field{
3747
+ .tds-time-field-input{
3744
3748
  display:flex;
3745
3749
  align-items:center;
3746
3750
  inline-size:100%;
3747
- 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);
3748
3754
  font-family:inherit;
3749
- font-size:var(--tds-date-picker-font-size);
3755
+ font-size:var(--tds-time-field-font-size);
3756
+ font-variant-numeric:tabular-nums;
3750
3757
  line-height:1;
3751
- color:var(--tds-date-picker-color);
3752
- -webkit-appearance:none;
3753
- -moz-appearance:none;
3754
- appearance:none;
3758
+ color:var(--tds-time-field-color);
3755
3759
  cursor:text;
3756
3760
  outline:var(--t-focus-ring-width) solid transparent;
3757
3761
  outline-offset:0;
3758
- background-color:var(--tds-date-picker-background-color);
3759
- 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);
3760
3764
  border-radius:var(--t-form-border-radius);
3761
3765
  }
3762
3766
 
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);
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);
3765
3769
  }
3766
3770
 
3767
- .tds-date-picker-field[data-focus-within]{
3771
+ .tds-time-field-input[data-focus-within]{
3768
3772
  outline-color:var(--t-focus-ring-color);
3769
3773
  outline-offset:var(--t-focus-ring-offset);
3770
- border-color:var(--tds-date-picker-border-color-active);
3774
+ border-color:var(--tds-time-field-border-color-active);
3771
3775
  }
3772
3776
 
3773
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3777
+ .tds-time-field-input[data-readonly]{
3774
3778
  color:var(--t-form-color-readonly);
3775
3779
  background-color:var(--t-form-background-color-readonly);
3776
3780
  border-color:var(--t-form-border-color-readonly);
3777
3781
  }
3778
3782
 
3779
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3783
+ .tds-time-field-input[data-readonly][data-hovered]{
3780
3784
  border-color:var(--t-form-border-color-readonly);
3781
3785
  }
3782
3786
 
3783
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3787
+ .tds-time-field-input[data-readonly][data-focus-within]{
3784
3788
  outline-color:var(--t-focus-ring-color);
3785
3789
  outline-offset:var(--t-focus-ring-offset);
3786
3790
  border-color:var(--t-form-border-color-hover);
3787
3791
  }
3788
3792
 
3789
- .tds-date-picker-input{
3790
- flex:1;
3791
- padding-block:var(--tds-date-picker-padding-block);
3792
- padding-inline-start:var(--t-spacing-1);
3793
+ .tds-time-field-segment{
3794
+ padding-inline:1px;
3793
3795
  font-variant-numeric:tabular-nums;
3794
- }
3795
-
3796
- .tds-date-picker-segment{
3797
- padding-inline:2px;
3796
+ cursor:text;
3798
3797
  caret-color:transparent;
3799
3798
  border-radius:var(--t-border-radius-sm);
3800
3799
  }
3801
3800
 
3802
- .tds-date-picker-segment[data-placeholder]{
3803
- color:var(--tds-date-picker-placeholder-color);
3801
+ .tds-time-field-segment[data-placeholder]{
3802
+ color:var(--tds-time-field-placeholder-color);
3804
3803
  }
3805
3804
 
3806
- .tds-date-picker-segment[data-focused]{
3805
+ .tds-time-field-segment[data-focused]{
3807
3806
  color:var(--t-text-color-inverted);
3808
3807
  outline:0;
3809
3808
  background:var(--t-fill-color-interaction);
3810
3809
  }
3811
3810
 
3812
- .tds-date-picker-segment-separator{
3811
+ .tds-time-field-segment-separator{
3813
3812
  padding-inline:0;
3814
- color:var(--tds-date-picker-placeholder-color);
3813
+ color:var(--tds-time-field-placeholder-color);
3815
3814
  }
3816
3815
 
3817
- .tds-date-picker-description{
3816
+ .tds-time-field-description{
3818
3817
  display:flex;
3819
3818
  gap:var(--t-spacing-half);
3820
3819
  align-items:flex-start;
3821
3820
  margin:0;
3822
3821
  font-size:var(--t-font-size-sm);
3823
3822
  line-height:1.35;
3824
- 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));
3825
3824
  cursor:text;
3826
3825
  }
3827
3826
 
3828
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3829
- 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);
3830
3829
  flex-shrink:0;
3831
3830
  margin-block-start:calc(.5lh - .5em);
3832
3831
  line-height:1.35;
3833
3832
  }
3834
3833
 
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
- }
3843
-
3844
- .tds-date-picker-popover{
3845
- padding:var(--t-spacing-2);
3846
- background:var(--t-surface-color-card);
3847
- border:1px solid var(--t-border-color);
3848
- border-radius:var(--t-border-radius);
3849
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3850
- }
3851
-
3852
- .tds-date-picker-popover[data-entering]{
3853
- animation:tds-date-picker-popover-enter 160ms ease;
3854
- }
3855
-
3856
- .tds-date-picker-popover[data-exiting]{
3857
- animation:tds-date-picker-popover-exit 130ms ease;
3858
- }
3859
-
3860
- @keyframes tds-date-picker-popover-enter{
3861
- from{
3862
- opacity:0;
3863
- transform:translateY(-8px);
3864
- }
3865
- }
3866
-
3867
- @keyframes tds-date-picker-popover-exit{
3868
- to{
3869
- opacity:0;
3870
- transform:translateY(-8px);
3871
- }
3872
- }
3873
-
3874
- @media (prefers-reduced-motion: reduce){
3875
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3876
- animation:none;
3877
- }
3878
- }
3879
-
3880
- .tds-date-picker-calendar{
3881
- inline-size:-moz-fit-content;
3882
- inline-size:fit-content;
3883
- }
3884
-
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;
3894
- margin:0;
3895
- font-size:var(--t-font-size-md);
3896
- font-weight:var(--t-font-weight-semibold);
3897
- text-align:center;
3898
- }
3899
-
3900
- .tds-date-picker-calendar-nav{
3901
- display:flex;
3902
- align-items:center;
3903
- justify-content:center;
3904
- padding:var(--t-spacing-half);
3905
- color:var(--t-text-color);
3906
- cursor:default;
3907
- outline:0;
3908
- background:transparent;
3909
- border:0;
3910
- border-radius:var(--t-border-radius-sm);
3911
- }
3912
-
3913
- .tds-date-picker-calendar-nav[data-hovered]{
3914
- background:var(--t-fill-color-neutral-070);
3915
- }
3916
-
3917
- .tds-date-picker-calendar-nav[data-pressed]{
3918
- background:var(--t-fill-color-button-interaction-ghost-active);
3919
- }
3920
-
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);
3924
- }
3925
-
3926
- .tds-date-picker-calendar-nav[data-disabled]{
3927
- color:var(--t-form-color-disabled);
3928
- cursor:not-allowed;
3929
- }
3930
-
3931
- .tds-date-picker-calendar-grid{
3932
- border-collapse:collapse;
3933
- }
3934
-
3935
- .tds-date-picker-calendar-header-cell{
3936
- padding-block:var(--t-spacing-half);
3937
- font-size:var(--t-font-size-sm);
3938
- font-weight:var(--t-font-weight-normal);
3939
- color:var(--t-text-color-secondary);
3940
- text-align:center;
3941
- }
3942
-
3943
- .tds-date-picker-calendar-cell{
3944
- display:flex;
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);
3954
- }
3955
-
3956
- .tds-date-picker-calendar-cell[data-hovered]{
3957
- background:var(--t-fill-color-neutral-070);
3958
- }
3959
-
3960
- .tds-date-picker-calendar-cell[data-pressed]{
3961
- background:var(--t-fill-color-button-interaction-ghost-active);
3962
- }
3963
-
3964
- .tds-date-picker-calendar-cell[data-selected]{
3965
- color:var(--t-text-color-inverted);
3966
- background:var(--t-fill-color-interaction);
3967
- }
3968
-
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
- }
3973
-
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
- }
3979
-
3980
- .tds-date-picker-calendar-cell[data-disabled]{
3981
- color:var(--t-form-color-disabled);
3982
- cursor:not-allowed;
3983
- }
3984
-
3985
- .tds-date-picker-calendar-cell[data-outside-month]{
3986
- color:var(--t-text-color-secondary);
3987
- }
3988
-
3989
3834
  .tds-number-stepper{
3990
3835
  --tds-number-stepper-border-color:var(--t-form-border-color);
3991
3836
  --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
@@ -4139,18 +3984,19 @@ a[class="tds-btn"]{
4139
3984
  line-height:1.35;
4140
3985
  }
4141
3986
 
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;
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;
4154
4000
 
4155
4001
  position:relative;
4156
4002
  display:flex;
@@ -4158,135 +4004,291 @@ a[class="tds-btn"]{
4158
4004
  gap:var(--t-spacing-half);
4159
4005
  }
4160
4006
 
4161
- .tds-time-field[data-required] .tds-time-field-label::after{
4007
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
4162
4008
  margin-left:.25ch;
4163
4009
  color:var(--t-text-color-status-error);
4164
4010
  content:"*";
4165
4011
  }
4166
4012
 
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;
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;
4174
4020
  }
4175
4021
 
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);
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);
4181
4027
  }
4182
4028
 
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{
4029
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
4188
4030
  cursor:not-allowed;
4189
4031
  }
4190
4032
 
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);
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;
4194
4037
  }
4195
4038
 
4196
- .tds-time-field-label{
4039
+ .tds-date-picker-label{
4197
4040
  font-size:var(--t-font-size-md);
4198
4041
  font-weight:var(--t-font-weight-normal);
4199
4042
  color:var(--t-text-color);
4200
4043
  cursor:default;
4201
4044
  }
4202
4045
 
4203
- .tds-time-field-input{
4046
+ .tds-date-picker-field{
4204
4047
  display:flex;
4205
4048
  align-items:center;
4206
4049
  inline-size:100%;
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);
4050
+ min-block-size:var(--tds-date-picker-min-height);
4210
4051
  font-family:inherit;
4211
- font-size:var(--tds-time-field-font-size);
4212
- font-variant-numeric:tabular-nums;
4052
+ font-size:var(--tds-date-picker-font-size);
4213
4053
  line-height:1;
4214
- color:var(--tds-time-field-color);
4054
+ color:var(--tds-date-picker-color);
4055
+ -webkit-appearance:none;
4056
+ -moz-appearance:none;
4057
+ appearance:none;
4215
4058
  cursor:text;
4216
4059
  outline:var(--t-focus-ring-width) solid transparent;
4217
4060
  outline-offset:0;
4218
- background-color:var(--tds-time-field-background-color);
4219
- 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);
4220
4063
  border-radius:var(--t-form-border-radius);
4221
4064
  }
4222
4065
 
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
+ .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);
4225
4068
  }
4226
4069
 
4227
- .tds-time-field-input[data-focus-within]{
4070
+ .tds-date-picker-field[data-focus-within]{
4228
4071
  outline-color:var(--t-focus-ring-color);
4229
4072
  outline-offset:var(--t-focus-ring-offset);
4230
- border-color:var(--tds-time-field-border-color-active);
4073
+ border-color:var(--tds-date-picker-border-color-active);
4231
4074
  }
4232
4075
 
4233
- .tds-time-field-input[data-readonly]{
4076
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
4234
4077
  color:var(--t-form-color-readonly);
4235
4078
  background-color:var(--t-form-background-color-readonly);
4236
4079
  border-color:var(--t-form-border-color-readonly);
4237
4080
  }
4238
4081
 
4239
- .tds-time-field-input[data-readonly][data-hovered]{
4082
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
4240
4083
  border-color:var(--t-form-border-color-readonly);
4241
4084
  }
4242
4085
 
4243
- .tds-time-field-input[data-readonly][data-focus-within]{
4086
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4244
4087
  outline-color:var(--t-focus-ring-color);
4245
4088
  outline-offset:var(--t-focus-ring-offset);
4246
4089
  border-color:var(--t-form-border-color-hover);
4247
4090
  }
4248
4091
 
4249
- .tds-time-field-segment{
4250
- 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);
4251
4096
  font-variant-numeric:tabular-nums;
4252
- cursor:text;
4097
+ }
4098
+
4099
+ .tds-date-picker-segment{
4100
+ padding-inline:2px;
4253
4101
  caret-color:transparent;
4254
4102
  border-radius:var(--t-border-radius-sm);
4255
4103
  }
4256
4104
 
4257
- .tds-time-field-segment[data-placeholder]{
4258
- color:var(--tds-time-field-placeholder-color);
4105
+ .tds-date-picker-segment[data-placeholder]{
4106
+ color:var(--tds-date-picker-placeholder-color);
4259
4107
  }
4260
4108
 
4261
- .tds-time-field-segment[data-focused]{
4109
+ .tds-date-picker-segment[data-focused]{
4262
4110
  color:var(--t-text-color-inverted);
4263
4111
  outline:0;
4264
4112
  background:var(--t-fill-color-interaction);
4265
4113
  }
4266
4114
 
4267
- .tds-time-field-segment-separator{
4115
+ .tds-date-picker-segment-separator{
4268
4116
  padding-inline:0;
4269
- color:var(--tds-time-field-placeholder-color);
4117
+ color:var(--tds-date-picker-placeholder-color);
4270
4118
  }
4271
4119
 
4272
- .tds-time-field-description{
4120
+ .tds-date-picker-description{
4273
4121
  display:flex;
4274
4122
  gap:var(--t-spacing-half);
4275
4123
  align-items:flex-start;
4276
4124
  margin:0;
4277
4125
  font-size:var(--t-font-size-sm);
4278
4126
  line-height:1.35;
4279
- 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));
4280
4128
  cursor:text;
4281
4129
  }
4282
4130
 
4283
- .tds-time-field-description .tds-time-field-description-invalid-icon{
4284
- 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);
4285
4133
  flex-shrink:0;
4286
4134
  margin-block-start:calc(.5lh - .5em);
4287
4135
  line-height:1.35;
4288
4136
  }
4289
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
+
4290
4292
  .t-banner{
4291
4293
  --t-banner-font-size:var(--t-font-size-md);
4292
4294
  --t-banner-font-color:var(--t-text-color);