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

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 (17) hide show
  1. package/dist/components/combo-box/ComboBox.d.ts +21 -40
  2. package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
  3. package/dist/components/combo-box/ComboBox.js +12 -10
  4. package/dist/components/combo-box/ComboBox.js.map +1 -1
  5. package/dist/components/combo-box/index.d.ts +1 -1
  6. package/dist/components/combo-box/index.d.ts.map +1 -1
  7. package/dist/index.css +2 -0
  8. package/dist/index.css.map +1 -1
  9. package/dist/reactRender.css +1242 -1240
  10. package/dist/reactRender.css.map +1 -1
  11. package/dist/reactRenderLegacy.css +1242 -1240
  12. package/dist/reactRenderLegacy.css.map +1 -1
  13. package/dist/unstable.css +2 -0
  14. package/dist/unstable.css.map +1 -1
  15. package/dist/utilities/reactAriaProps.d.ts +7 -0
  16. package/dist/utilities/reactAriaProps.d.ts.map +1 -0
  17. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,266 +1,3 @@
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
1
  .tds-checkbox{
265
2
  --tds-checkbox-font-size:var(--t-font-size-md);
266
3
  --tds-checkbox-cursor:pointer;
@@ -342,390 +79,141 @@
342
79
  mask-image:var(--tds-checkbox-input-icon);
343
80
  -webkit-mask-repeat:no-repeat;
344
81
  mask-repeat:no-repeat;
345
- -webkit-mask-size:contain;
346
- mask-size:contain;
347
- transform:translate(-50%, -50%);
348
- }
349
-
350
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
351
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
352
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
353
- }
354
-
355
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
356
- outline:var(--t-focus-ring-outline);
357
- outline-offset:var(--t-focus-ring-offset);
358
- }
359
-
360
- :is(.tds-checkbox input[type="checkbox"]):disabled{
361
- pointer-events:none;
362
- }
363
-
364
- @media (prefers-reduced-motion: reduce){
365
-
366
- .tds-checkbox input[type="checkbox"]{
367
- --tds-checkbox-transition-property:none;
368
- }
369
- }
370
-
371
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
372
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
373
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
374
- --tds-checkbox-input-icon-visibility:visible;
375
- --tds-checkbox-input-icon-opacity:1;
376
- }
377
-
378
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
379
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
380
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
381
- }
382
-
383
- .tds-checkbox:has(input:checked){
384
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
385
- }
386
-
387
- .tds-checkbox:has(input:indeterminate){
388
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
389
- }
390
-
391
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
392
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
393
- --tds-checkbox-description-color:var(--t-text-color-status-error);
394
- --tds-checkbox-description-invalid-icon-display:inline-block;
395
- }
396
-
397
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
398
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
399
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
400
- }
401
-
402
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
403
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
404
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
405
- }
406
-
407
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
408
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
409
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
410
- }
411
-
412
- .tds-checkbox:has(input:required) label::after{
413
- margin-left:.25ch;
414
- color:var(--t-text-color-status-error);
415
- content:"*";
416
- }
417
-
418
- .tds-checkbox:has(input:disabled){
419
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
420
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
421
-
422
- --tds-checkbox-label-color:var(--t-form-color-disabled);
423
- --tds-checkbox-description-color:var(--t-form-color-disabled);
424
- --tds-checkbox-cursor:not-allowed;
425
- }
426
-
427
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
428
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
429
- }
430
-
431
- .tds-checkbox-description{
432
- display:flex;
433
- grid-area:2 / 2;
434
- gap:var(--t-spacing-half);
435
- align-items:flex-start;
436
- margin:0;
437
- font-size:var(--tds-checkbox-description-font-size);
438
- line-height:var(--tds-checkbox-description-line-height);
439
- color:var(--tds-checkbox-description-color);
440
- cursor:text;
441
- }
442
-
443
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
444
- display:var(--tds-checkbox-description-invalid-icon-display);
445
- flex-shrink:0;
446
- margin-top:calc(.5lh - .5em);
447
- line-height:var(--tds-checkbox-description-line-height);
448
- }
449
-
450
- .tds-checkbox--sm{
451
- --tds-checkbox-line-height:1.35;
452
- --tds-checkbox-input-size:var(--t-element-size-sm);
453
- --tds-checkbox-font-size:var(--t-font-size-sm);
454
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
455
- --tds-checkbox-description-line-height:1.3;
456
- }
457
-
458
- .tds-radio{
459
- --tds-radio-font-size:var(--t-font-size-md);
460
- --tds-radio-cursor:pointer;
461
- --tds-radio-line-height:1.4;
462
- --tds-radio-transition-property:border-width;
463
-
464
- --tds-radio-input-size:var(--t-element-size-md);
465
- --tds-radio-input-border-radius:var(--t-border-radius-round);
466
- --tds-radio-input-border-color:var(--t-form-border-color);
467
- --tds-radio-input-border-width:var(--t-form-border-width);
468
- --tds-radio-input-background-color:transparent;
469
-
470
- --tds-radio-label-color:var(--t-form-color);
471
-
472
- --tds-radio-description-font-size:var(--t-font-size-sm);
473
- --tds-radio-description-line-height:1.35;
474
- --tds-radio-description-color:var(--t-text-color-secondary);
475
-
476
- position:relative;
477
- display:inline-grid;
478
- grid-template-columns:auto;
479
- grid-auto-columns:1fr;
480
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
481
- line-height:var(--tds-radio-line-height);
482
- cursor:var(--tds-radio-cursor);
483
- -webkit-user-select:none;
484
- -moz-user-select:none;
485
- user-select:none;
486
- }
487
-
488
- .tds-radio label{
489
- grid-area:1 / 2;
490
- font-size:var(--tds-radio-font-size);
491
- font-weight:var(--t-font-weight-normal);
492
- color:var(--tds-radio-label-color);
493
- cursor:var(--tds-radio-cursor);
494
- }
495
-
496
- .tds-radio input[type="radio"]{
497
- position:relative;
498
- width:1em;
499
- height:1em;
500
- margin:calc((1lh - 1em) / 2) 0 0;
501
- font-size:var(--tds-radio-font-size);
502
- line-height:inherit;
503
- -webkit-appearance:none;
504
- -moz-appearance:none;
505
- appearance:none;
506
- cursor:var(--tds-radio-cursor);
507
- background-color:var(--tds-radio-input-background-color);
508
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
509
- border-radius:var(--tds-radio-input-border-radius);
510
- transition-timing-function:var(--t-ease-in-out);
511
- transition-duration:var(--t-duration-200);
512
- transition-property:var(--tds-radio-transition-property);
513
- }
82
+ -webkit-mask-size:contain;
83
+ mask-size:contain;
84
+ transform:translate(-50%, -50%);
85
+ }
514
86
 
515
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
516
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
517
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
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);
518
90
  }
519
91
 
520
- :is(.tds-radio input[type="radio"]):focus-visible{
92
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
521
93
  outline:var(--t-focus-ring-outline);
522
94
  outline-offset:var(--t-focus-ring-offset);
523
95
  }
524
96
 
525
- :is(.tds-radio input[type="radio"]):disabled{
97
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
526
98
  pointer-events:none;
527
99
  }
528
100
 
529
101
  @media (prefers-reduced-motion: reduce){
530
102
 
531
- .tds-radio input[type="radio"]{
532
- --tds-radio-transition-property:none;
103
+ .tds-checkbox input[type="checkbox"]{
104
+ --tds-checkbox-transition-property:none;
533
105
  }
534
106
  }
535
107
 
536
- .tds-radio:has(input:checked){
537
- --tds-radio-input-background-color:var(--t-form-background-color);
538
- --tds-radio-input-border-color:var(--t-border-color-control-info);
539
- --tds-radio-input-border-width:4px;
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;
540
113
  }
541
114
 
542
- .tds-radio:has(input:checked) input:hover:not(:disabled){
543
- --tds-radio-input-background-color:var(--t-form-background-color);
544
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
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);
545
118
  }
546
119
 
547
- .tds-radio:has(input:user-invalid){
548
- --tds-radio-input-border-color:var(--t-form-border-color-error);
120
+ .tds-checkbox:has(input:checked){
121
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
549
122
  }
550
123
 
551
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
552
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
553
- --tds-radio-input-background-color:var(--t-form-background-color-error);
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);
554
137
  }
555
138
 
556
- .tds-radio:has(input:disabled){
557
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
558
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
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
+ }
559
143
 
560
- --tds-radio-label-color:var(--t-form-color-disabled);
561
- --tds-radio-description-color:var(--t-form-color-disabled);
562
- --tds-radio-cursor:not-allowed;
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;
563
162
  }
564
163
 
565
- .tds-radio:has(input:disabled) input:checked{
566
- --tds-radio-input-background-color:var(--t-form-background-color);
567
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
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);
568
166
  }
569
167
 
570
- .tds-radio-description{
168
+ .tds-checkbox-description{
571
169
  display:flex;
572
170
  grid-area:2 / 2;
573
171
  gap:var(--t-spacing-half);
574
172
  align-items:flex-start;
575
173
  margin:0;
576
- font-size:var(--tds-radio-description-font-size);
577
- line-height:var(--tds-radio-description-line-height);
578
- color:var(--tds-radio-description-color);
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);
579
177
  cursor:text;
580
178
  }
581
179
 
582
- .tds-radio--sm{
583
- --tds-radio-line-height:1.35;
584
- --tds-radio-input-size:var(--t-element-size-sm);
585
- --tds-radio-font-size:var(--t-font-size-sm);
586
- --tds-radio-description-font-size:var(--t-font-size-xs);
587
- --tds-radio-description-line-height:1.3;
588
- }
589
-
590
- .tds-toggle-switch{
591
- --tds-toggle-switch-font-size:var(--t-font-size-md);
592
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
593
- --tds-toggle-switch-cursor:pointer;
594
- --tds-toggle-switch-display:inline-grid;
595
- --tds-toggle-switch-line-height:1.4;
596
-
597
- --tds-toggle-switch-label-color:var(--t-form-color);
598
-
599
- --tds-toggle-switch-track-width:var(--t-container-size-md);
600
- --tds-toggle-switch-track-outline:none;
601
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
602
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
603
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
604
-
605
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
606
- --tds-toggle-switch-thumb-transform:translateX(0);
607
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
608
-
609
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
610
- --tds-toggle-switch-description-line-height:1.35;
611
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
612
- position:relative;
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
+ }
613
186
 
614
- display:var(--tds-toggle-switch-display);
615
- grid-template-columns:auto;
616
- grid-auto-columns:1fr;
617
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
618
- -webkit-user-select:none;
619
- -moz-user-select:none;
620
- user-select:none;
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;
621
193
  }
622
194
 
623
- .tds-toggle-switch input[type="checkbox"]{
624
- position:absolute;
625
- width:var(--tds-toggle-switch-track-width);
626
- height:var(--tds-toggle-switch-track-height);
627
- margin:0;
628
- -webkit-appearance:none;
629
- -moz-appearance:none;
630
- appearance:none;
631
- cursor:var(--tds-toggle-switch-cursor);
632
- outline:var(--tds-toggle-switch-track-outline);
633
- outline-offset:var(--t-focus-ring-offset);
634
- background-color:transparent;
635
- border:0;
636
- border-radius:var(--t-border-radius-round);
637
- }
638
195
 
639
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
640
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
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;
641
199
  }
642
200
 
643
- .tds-toggle-switch label{
644
- display:inline-flex;
645
- grid-area:1 / 2;
646
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
647
- column-gap:var(--tds-toggle-switch-column-gap);
648
- margin-top:-.09375em;
649
- font-size:var(--tds-toggle-switch-font-size);
650
- font-weight:var(--t-font-weight-normal);
651
- line-height:var(--tds-toggle-switch-line-height);
652
- color:var(--tds-toggle-switch-label-color);
653
- cursor:var(--tds-toggle-switch-cursor);
654
- }
655
-
656
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
657
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
658
- }
659
-
660
- .tds-toggle-switch:has(input:checked){
661
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
662
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
663
- }
664
-
665
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
666
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
201
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
202
+ inline-size:1em;
203
+ block-size:2em;
667
204
  }
668
205
 
669
- .tds-toggle-switch:has(input:disabled){
670
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
671
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
672
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
673
- --tds-toggle-switch-cursor:not-allowed;
674
- }
675
-
676
- .tds-toggle-switch-track{
677
- position:relative;
678
- flex-shrink:0;
679
- width:var(--tds-toggle-switch-track-width);
680
- height:var(--tds-toggle-switch-track-height);
681
- background-color:var(--tds-toggle-switch-track-background-color);
682
- border-radius:var(--t-border-radius-round);
683
- transition:var(--tds-toggle-switch-track-transition);
684
- }
685
-
686
- .tds-toggle-switch-track::before{
687
- position:absolute;
688
- top:var(--t-spacing-fourth);
689
- left:var(--t-spacing-fourth);
690
- width:var(--tds-toggle-switch-thumb-size);
691
- height:var(--tds-toggle-switch-thumb-size);
692
- content:"";
693
- background-color:#fff;
694
- border-radius:var(--t-border-radius-round);
695
- transform:var(--tds-toggle-switch-thumb-transform);
696
- transition:var(--tds-toggle-switch-thumb-transition);
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);
697
211
  }
698
212
 
699
- @media (prefers-reduced-motion: reduce){
700
-
701
- .tds-toggle-switch-track{
702
- --tds-toggle-switch-track-transition:none;
703
- --tds-toggle-switch-thumb-transition:none;
704
- }
213
+ .tds-input--auto-width input{
214
+ field-sizing:content;
215
+ inline-size:auto;
705
216
  }
706
-
707
- .tds-toggle-switch-description{
708
- display:flex;
709
- grid-area:2 / 2;
710
- align-items:flex-start;
711
- margin:0;
712
- font-size:var(--tds-toggle-switch-description-font-size);
713
- line-height:var(--tds-toggle-switch-description-line-height);
714
- color:var(--tds-toggle-switch-description-color);
715
- cursor:text;
716
- }
717
-
718
- .tds-toggle-switch--sm{
719
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
720
- --tds-toggle-switch-line-height:1.35;
721
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
722
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
723
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
724
- --tds-toggle-switch-description-line-height:1.3;
725
- }
726
-
727
- .tds-toggle-switch--hide-label{
728
- --tds-toggle-switch-display:inline-flex;
729
217
  }
730
218
 
731
219
 
@@ -764,436 +252,726 @@
764
252
  --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
765
253
  --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
766
254
 
767
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
768
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
255
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
256
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
257
+ }
258
+
259
+ @media (prefers-reduced-motion: reduce){
260
+ tds-sidenav,
261
+ .tds-sidenav{
262
+ --tds-sidenav-collapse-transition-enter:none;
263
+ --tds-sidenav-collapse-transition-exit:none;
264
+ --tds-sidenav-collapse-closed-transform:none;
265
+ --tds-sidenav-collapse-open-transform:none;
266
+ }
267
+ }
268
+
269
+ .tds-sidenav--theme-gray{
270
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
271
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
272
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
273
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
274
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
275
+ }
276
+ }
277
+
278
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
279
+ display:flex;
280
+ }
281
+
282
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
283
+ flex-direction:column;
284
+ gap:var(--t-spacing-half);
285
+ width:100%;
286
+ }
287
+
288
+ .tds-sidenav-section-list{
289
+ width:100%;
290
+ padding:0;
291
+ margin:0;
292
+ list-style:none;
293
+ }
294
+
295
+ .tds-sidenav-section-header{
296
+ display:flex;
297
+ align-items:baseline;
298
+ justify-content:space-between;
299
+ padding-top:var(--t-spacing-2);
300
+ }
301
+
302
+ .tds-sidenav-section-header h2{
303
+ margin:0;
304
+ font-size:var(--t-font-size-sm);
305
+ font-weight:var(--t-font-weight-semibold);
306
+ line-height:1.35;
307
+ color:var(--t-text-color-secondary);
308
+ text-transform:uppercase;
309
+ }
310
+
311
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
312
+ padding-top:0;
313
+ }
314
+
315
+ .tds-sidenav-section-header [slot="label-actions"]{
316
+ display:flex;
317
+ gap:var(--t-spacing-half);
318
+ align-items:center;
319
+ }
320
+
321
+ .tds-sidenav-section [slot="section-actions"]{
322
+ display:flex;
323
+ gap:12px;
324
+ align-items:center;
325
+ min-height:42px;
326
+ padding:var(--t-spacing-1) 0;
327
+ }
328
+
329
+ .tds-sidenav-section-list,
330
+ .tds-sidenav-item{
331
+ width:100%;
332
+ padding:0;
333
+ margin:0;
334
+ }
335
+
336
+ .tds-sidenav-item :is(a,button){
337
+ position:relative;
338
+ display:flex;
339
+ gap:12px;
340
+ align-items:center;
341
+ width:100%;
342
+ padding:12px;
343
+ overflow:hidden;
344
+ font-size:var(--t-font-size-sm);
345
+ line-height:18px;
346
+ color:var(--t-text-color-headline);
347
+ white-space:nowrap;
348
+ text-decoration:none;
349
+ -webkit-appearance:none;
350
+ -moz-appearance:none;
351
+ appearance:none;
352
+ cursor:pointer;
353
+ background-color:var(--tds-sidenav-item-background, transparent);
354
+ border:0;
355
+ border-radius:var(--t-border-radius);
356
+ transition:var(--tds-sidenav-item-transition);
357
+ }
358
+
359
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
360
+ display:block;
361
+ flex:1;
362
+ overflow:hidden;
363
+ text-overflow:ellipsis;
364
+ text-align:left;
365
+ white-space:nowrap;
366
+ }
367
+
368
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
369
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
370
+ color:var(--t-text-color-headline);
371
+ text-decoration:none;
372
+ }
373
+
374
+ :is(.tds-sidenav-item :is(a,button)):active{
375
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
376
+ }
377
+
378
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
379
+ overflow:hidden;
380
+ color:var(--tds-sidenav-item-icon-color);
381
+ }
382
+
383
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
384
+ display:block;
385
+ width:var(--tds-sidenav-item-icon-size);
386
+ height:var(--tds-sidenav-item-icon-size);
387
+ }
388
+
389
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
390
+ --tds-sidenav-indent:19px;
391
+ }
392
+
393
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
394
+ visibility:visible;
395
+ block-size:auto;
396
+ opacity:1;
397
+ }
398
+
399
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
400
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
401
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
402
+
403
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
404
+ font-weight:var(--t-font-weight-semibold);
405
+ }
406
+
407
+ .tds-sidenav-item:has(.tds-sidenav-section){
408
+ display:flex;
409
+ flex-direction:column;
410
+ gap:var(--t-spacing-half);
411
+ }
412
+
413
+ .tds-sidenav-item .tds-sidenav-section-list{
414
+ --tds-sidenav-item-depth:1;
415
+ gap:0;
416
+ }
417
+
418
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
419
+ visibility:hidden;
420
+ block-size:0;
421
+ overflow-y:clip;
422
+ opacity:0;
423
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
424
+ }
425
+
426
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
427
+ --tds-sidenav-item-depth:2;
428
+ }
429
+
430
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
431
+ min-height:var(--t-element-size-2xl);
432
+ padding-block:9px;
433
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
434
+ line-height:1;
435
+ background-color:transparent;
436
+ }
437
+
438
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
439
+ position:absolute;
440
+ top:0;
441
+ bottom:0;
442
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
443
+ width:2px;
444
+ content:"";
445
+ background-color:var(--tds-sidenav-item-nested-border-color);
446
+ transition:var(--tds-sidenav-item-transition);
447
+ }
448
+
449
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
450
+ position:absolute;
451
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
452
+ z-index:-1;
453
+ height:100%;
454
+ content:"";
455
+ background-color:var(--tds-sidenav-item-nested-background);
456
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
457
+ transition:var(--tds-sidenav-item-transition);
458
+ }
459
+
460
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
461
+ display:block;
462
+ text-align:left;
463
+ white-space:normal;
464
+ }
465
+
466
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
467
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
468
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
469
+ }
470
+
471
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
472
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
473
+ }
474
+
475
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
476
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
477
+ font-weight:var(--t-font-weight-medium);
478
+ }
479
+
480
+ .tds-sidenav-responsive-header{
481
+ display:flex;
482
+ gap:var(--t-spacing-2);
483
+ align-items:center;
484
+ width:100%;
485
+ }
486
+
487
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
488
+ order:0;
489
+ }
490
+
491
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
492
+ flex:1;
493
+ order:1;
494
+ margin:0;
495
+ font-size:var(--t-font-size-lg);
496
+ font-weight:var(--t-font-weight-medium);
497
+ color:var(--t-text-color-headline);
498
+ }
499
+
500
+ @media (max-width: 719px){
501
+ .tds-sidenav-collapse{
502
+ z-index:10001;
503
+ display:none;
504
+ max-width:min(448px, calc(100vw - 48px));
505
+ padding:0;
506
+ margin:12px 0;
507
+ position-area:bottom span-right;
508
+ overflow:hidden;
509
+ outline:0;
510
+ background:var(--t-surface-color-card);
511
+ border:0;
512
+ border-radius:6px;
513
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
514
+ opacity:var(--tds-sidenav-collapse-open-opacity);
515
+ transform:var(--tds-sidenav-collapse-open-transform);
516
+ transition:var(--tds-sidenav-collapse-transition-enter);
517
+ will-change:transform;
518
+ }
519
+
520
+ .tds-sidenav-scroll-container{
521
+ --webkit-overflow-scrolling:touch;
522
+ display:block;
523
+ width:100%;
524
+ height:-moz-fit-content;
525
+ height:fit-content;
526
+ padding:var(--t-spacing-2);
527
+ overflow-y:auto;
769
528
  }
770
529
 
771
- @media (prefers-reduced-motion: reduce){
772
- tds-sidenav,
773
- .tds-sidenav{
774
- --tds-sidenav-collapse-transition-enter:none;
775
- --tds-sidenav-collapse-transition-exit:none;
776
- --tds-sidenav-collapse-closed-transform:none;
777
- --tds-sidenav-collapse-open-transform:none;
530
+ .tds-sidenav-item :is(a, button) :is(.prefix){
531
+ display:none;
778
532
  }
533
+ @supports selector(:popover-open){
534
+ .tds-sidenav-collapse:popover-open{
535
+ display:flex;
779
536
  }
780
537
 
781
- .tds-sidenav--theme-gray{
782
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
783
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
784
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
785
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
786
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
787
- }
788
- }
538
+ .tds-sidenav-collapse:not(:popover-open){
539
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
540
+ transition:var(--tds-sidenav-collapse-transition-exit);
541
+ }
789
542
 
790
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
791
- display:flex;
543
+ @starting-style{
544
+ .tds-sidenav-collapse:popover-open{
545
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
546
+ transform:var(--tds-sidenav-collapse-closed-transform);
547
+ }
548
+ }
792
549
  }
550
+ @supports not selector(:popover-open){
551
+ .tds-sidenav-collapse.\:popover-open{
552
+ display:flex;
553
+ }
793
554
 
794
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
795
- flex-direction:column;
796
- gap:var(--t-spacing-half);
797
- width:100%;
555
+ .tds-sidenav-collapse:not(.\:popover-open){
556
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
557
+ transition:var(--tds-sidenav-collapse-transition-exit);
558
+ }
798
559
  }
799
-
800
- .tds-sidenav-section-list{
801
- width:100%;
802
- padding:0;
803
- margin:0;
804
- list-style:none;
805
560
  }
806
561
 
807
- .tds-sidenav-section-header{
808
- display:flex;
809
- align-items:baseline;
810
- justify-content:space-between;
811
- padding-top:var(--t-spacing-2);
562
+ @media (min-width: 720px){
563
+ .tds-sidenav-responsive-header{
564
+ display:none;
565
+ }
812
566
  }
813
567
 
814
- .tds-sidenav-section-header h2{
815
- margin:0;
816
- font-size:var(--t-font-size-sm);
817
- font-weight:var(--t-font-weight-semibold);
818
- line-height:1.35;
819
- color:var(--t-text-color-secondary);
820
- text-transform:uppercase;
821
- }
568
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
569
+ display:none;
570
+ }
822
571
 
823
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
824
- padding-top:0;
825
- }
572
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
573
+ display:block;
574
+ }
826
575
 
827
- .tds-sidenav-section-header [slot="label-actions"]{
828
- display:flex;
829
- gap:var(--t-spacing-half);
830
- align-items:center;
831
- }
576
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
577
+ display:flex;
578
+ flex-direction:column;
579
+ }
832
580
 
833
- .tds-sidenav-section [slot="section-actions"]{
834
- display:flex;
835
- gap:12px;
836
- align-items:center;
837
- min-height:42px;
838
- padding:var(--t-spacing-1) 0;
581
+ @layer t-critical{
582
+ tds-page-header:not(.hydrated){
583
+ display:none;
584
+ }
839
585
  }
840
586
 
841
- .tds-sidenav-section-list,
842
- .tds-sidenav-item{
843
- width:100%;
844
- padding:0;
845
- margin:0;
846
- }
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;
847
605
 
848
- .tds-sidenav-item :is(a,button){
849
- position:relative;
850
- display:flex;
851
- gap:12px;
852
- align-items:center;
853
- width:100%;
854
- padding:12px;
855
- overflow:hidden;
856
- font-size:var(--t-font-size-sm);
857
- line-height:18px;
858
- color:var(--t-text-color-headline);
859
- white-space:nowrap;
860
- text-decoration:none;
861
- -webkit-appearance:none;
862
- -moz-appearance:none;
863
- appearance:none;
864
- cursor:pointer;
865
- background-color:var(--tds-sidenav-item-background, transparent);
866
- border:0;
867
- border-radius:var(--t-border-radius);
868
- transition:var(--tds-sidenav-item-transition);
869
- }
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);
870
608
 
871
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
872
- display:block;
873
- flex:1;
874
- overflow:hidden;
875
- text-overflow:ellipsis;
876
- text-align:left;
877
- white-space:nowrap;
878
- }
609
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
610
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
611
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
879
612
 
880
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
881
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
882
- color:var(--t-text-color-headline);
883
- text-decoration:none;
884
- }
613
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
614
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
885
615
 
886
- :is(.tds-sidenav-item :is(a,button)):active{
887
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
888
- }
616
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
617
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
618
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
889
619
 
890
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
891
- overflow:hidden;
892
- color:var(--tds-sidenav-item-icon-color);
893
- }
620
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
621
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
622
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
623
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
624
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
625
+ }
894
626
 
895
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
896
- display:block;
897
- width:var(--tds-sidenav-item-icon-size);
898
- height:var(--tds-sidenav-item-icon-size);
899
- }
627
+ .tds-page-header--profile{
628
+ --tds-page-header-padding-y:20px;
629
+ }
900
630
 
901
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
902
- --tds-sidenav-indent:19px;
631
+ @supports (color: light-dark(#fff, #000)){
632
+ .tds-page-header{
633
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
634
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
903
635
  }
636
+ }
904
637
 
905
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
906
- visibility:visible;
907
- block-size:auto;
908
- opacity:1;
638
+ @media (min-width: 600px){
639
+ .tds-page-header{
640
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
641
+ --tds-page-header-color:var(--t-text-color-secondary);
642
+ --tds-page-header-bottom-border-color:var(--t-border-color);
643
+ --tds-page-header-padding-x:var(--t-spacing-3);
644
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
645
+ --tds-page-header-nav-gap:var(--t-spacing-half);
646
+ --tds-page-header-nav-background:transparent;
647
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
648
+ --tds-page-header-nav-item-border-width:1px;
649
+ --tds-page-header-nav-item-color:var(--t-text-color);
650
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
651
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
652
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
653
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
654
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
909
655
  }
656
+ }
657
+ }
910
658
 
911
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
912
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
913
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
659
+ .tds-page-header{
660
+ display:flex;
661
+ flex-direction:column;
662
+ padding-top:var(--tds-page-header-padding-y);
663
+ color:var(--tds-page-header-color);
664
+ background:var(--tds-page-header-background-color);
665
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
666
+ }
914
667
 
915
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
916
- font-weight:var(--t-font-weight-semibold);
668
+ .tds-page-header:not(.has-nav){
669
+ padding-bottom:var(--tds-page-header-padding-y);
917
670
  }
918
671
 
919
- .tds-sidenav-item:has(.tds-sidenav-section){
920
- display:flex;
921
- flex-direction:column;
922
- gap:var(--t-spacing-half);
672
+ .tds-page-header.inactive{
673
+ background:var(--tds-page-header-background-color-inactive);
674
+ }
675
+
676
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
677
+ width:100%;
923
678
  }
924
679
 
925
- .tds-sidenav-item .tds-sidenav-section-list{
926
- --tds-sidenav-item-depth:1;
927
- gap:0;
680
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
681
+ display:flex;
682
+ flex-flow:row wrap;
683
+ gap:var(--t-spacing-half) var(--t-spacing-1);
684
+ align-items:flex-start;
685
+ justify-content:flex-start;
686
+ min-width:0;
928
687
  }
929
688
 
930
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
931
- visibility:hidden;
932
- block-size:0;
933
- overflow-y:clip;
934
- opacity:0;
935
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
689
+ :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{
690
+ display:flex;
691
+ gap:var(--tds-page-header-nav-gap);
692
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
693
+ margin:0 0 -1px;
694
+ overflow:auto;
695
+ list-style:none;
696
+ background:var(--tds-page-header-nav-background);
936
697
  }
937
698
 
938
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
939
- --tds-sidenav-item-depth:2;
699
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
700
+ position:relative;
701
+ display:inline-flex;
702
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
703
+ font-size:var(--t-font-size-sm);
704
+ line-height:22px;
705
+ color:var(--tds-page-header-nav-item-color);
706
+ white-space:nowrap;
707
+ text-decoration:none;
708
+ -webkit-appearance:none;
709
+ -moz-appearance:none;
710
+ appearance:none;
711
+ cursor:pointer;
712
+ outline-offset:-2px;
713
+ background-color:var(--tds-page-header-nav-item-background-color);
714
+ background-clip:padding-box;
715
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
716
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
717
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
940
718
  }
941
719
 
942
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
943
- min-height:var(--t-element-size-2xl);
944
- padding-block:9px;
945
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
946
- line-height:1;
947
- background-color:transparent;
720
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
721
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
722
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
723
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
724
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
725
+ }
726
+
727
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
728
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
729
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
730
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
731
+ }
732
+
733
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
734
+ background-color:var(--tds-page-header-nav-item-background-color-active);
735
+ border-color:var(--tds-page-header-nav-item-border-color-active);
736
+ }
737
+
738
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
739
+ color:var(--tds-page-header-nav-item-color-disabled);
740
+ cursor:not-allowed;
741
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
742
+ opacity:1;
743
+ }
744
+
745
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
746
+ position:relative;
948
747
  }
949
748
 
950
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
951
- position:absolute;
952
- top:0;
953
- bottom:0;
954
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
955
- width:2px;
956
- content:"";
957
- background-color:var(--tds-sidenav-item-nested-border-color);
958
- transition:var(--tds-sidenav-item-transition);
749
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
750
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
751
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
959
752
  }
960
753
 
961
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
754
+ :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{
962
755
  position:absolute;
963
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
964
- z-index:-1;
965
- height:100%;
756
+ top:-5px;
757
+ right:-2px;
758
+ width:10px;
759
+ height:10px;
966
760
  content:"";
967
- background-color:var(--tds-sidenav-item-nested-background);
968
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
969
- transition:var(--tds-sidenav-item-transition);
970
- }
971
-
972
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
973
- display:block;
974
- text-align:left;
975
- white-space:normal;
976
- }
977
-
978
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
979
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
980
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
761
+ background:var(--tds-page-header-nav-item-indicator-color);
762
+ border-radius:50%;
981
763
  }
982
764
 
983
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
984
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
765
+ @media (prefers-reduced-motion: no-preference){
766
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
767
+ animation:indicator-pulse 1.25s ease infinite;
768
+ }
985
769
  }
986
770
 
987
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
988
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
989
- font-weight:var(--t-font-weight-medium);
990
- }
991
-
992
- .tds-sidenav-responsive-header{
771
+ .tds-page-header__title-bar{
993
772
  display:flex;
994
- gap:var(--t-spacing-2);
995
- align-items:center;
996
- width:100%;
773
+ flex-direction:column;
774
+ gap:var(--t-spacing-2) var(--t-spacing-1);
775
+ align-items:flex-start;
776
+ justify-content:space-between;
777
+ padding:0 var(--tds-page-header-padding-x);
997
778
  }
998
779
 
999
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1000
- order:0;
780
+ .tds-page-header--profile > .tds-page-header__title-bar{
781
+ align-items:center;
1001
782
  }
1002
783
 
1003
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1004
- flex:1;
1005
- order:1;
1006
- margin:0;
1007
- font-size:var(--t-font-size-lg);
1008
- font-weight:var(--t-font-weight-medium);
1009
- color:var(--t-text-color-headline);
1010
- }
784
+ .tds-page-header__primary{
785
+ width:100%;
786
+ }
1011
787
 
1012
- @media (max-width: 719px){
1013
- .tds-sidenav-collapse{
1014
- z-index:10001;
1015
- display:none;
1016
- max-width:min(448px, calc(100vw - 48px));
1017
- padding:0;
1018
- margin:12px 0;
1019
- position-area:bottom span-right;
1020
- overflow:hidden;
1021
- outline:0;
1022
- background:var(--t-surface-color-card);
1023
- border:0;
1024
- border-radius:6px;
1025
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1026
- opacity:var(--tds-sidenav-collapse-open-opacity);
1027
- transform:var(--tds-sidenav-collapse-open-transform);
1028
- transition:var(--tds-sidenav-collapse-transition-enter);
1029
- will-change:transform;
788
+ .tds-page-header__primary h1{
789
+ margin:0;
790
+ font-size:var(--tds-page-header-headline-font-size);
791
+ font-weight:var(--t-font-weight-normal);
792
+ line-height:32px;
793
+ color:var(--tds-page-header-headline-color);
794
+ overflow-wrap:break-word;
1030
795
  }
1031
796
 
1032
- .tds-sidenav-scroll-container{
1033
- --webkit-overflow-scrolling:touch;
1034
- display:block;
1035
- width:100%;
1036
- height:-moz-fit-content;
1037
- height:fit-content;
1038
- padding:var(--t-spacing-2);
1039
- overflow-y:auto;
797
+ @media (min-width: 960px){
798
+ .tds-page-header__primary{
799
+ flex:1 1 max-content;
800
+ width:auto;
801
+ min-width:0;
802
+ max-width:100%;
1040
803
  }
1041
804
 
1042
- .tds-sidenav-item :is(a, button) :is(.prefix){
1043
- display:none;
805
+ .tds-page-header__title-bar,
806
+ .tds-page-header--profile .tds-page-header__title-bar{
807
+ flex-flow:row nowrap;
808
+ row-gap:12px;
809
+ align-items:flex-start;
1044
810
  }
1045
- @supports selector(:popover-open){
1046
- .tds-sidenav-collapse:popover-open{
1047
- display:flex;
811
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
812
+ width:auto;
1048
813
  }
1049
814
 
1050
- .tds-sidenav-collapse:not(:popover-open){
1051
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1052
- transition:var(--tds-sidenav-collapse-transition-exit);
815
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
816
+ justify-content:flex-end;
1053
817
  }
818
+ }
1054
819
 
1055
- @starting-style{
1056
- .tds-sidenav-collapse:popover-open{
1057
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1058
- transform:var(--tds-sidenav-collapse-closed-transform);
1059
- }
1060
- }
1061
- }
1062
- @supports not selector(:popover-open){
1063
- .tds-sidenav-collapse.\:popover-open{
1064
- display:flex;
1065
- }
820
+ .tds-page-header-phone,
821
+ .tds-page-header-email{
822
+ color:var(--tds-page-header-color);
823
+ white-space:nowrap;
824
+ }
1066
825
 
1067
- .tds-sidenav-collapse:not(.\:popover-open){
1068
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1069
- transition:var(--tds-sidenav-collapse-transition-exit);
1070
- }
1071
- }
826
+ .tds-page-header-email{
827
+ max-width:100%;
828
+ overflow:hidden;
829
+ text-overflow:ellipsis;
1072
830
  }
1073
831
 
1074
- @media (min-width: 720px){
1075
- .tds-sidenav-responsive-header{
1076
- display:none;
832
+ @keyframes indicator-pulse{
833
+ 0%{
834
+ opacity:.3;
835
+ transform:scale(.9);
1077
836
  }
1078
- }
1079
837
 
1080
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1081
- display:none;
1082
- }
838
+ 100%{
839
+ opacity:0;
840
+ transform:scale(1.75);
841
+ }
842
+ }
1083
843
 
1084
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1085
- display:block;
1086
- }
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;
1087
849
 
1088
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1089
- display:flex;
1090
- flex-direction:column;
1091
- }
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;
1092
855
 
1093
- .tds-input:has(textarea){
1094
- --tds-input-padding-block:6px;
1095
- --tds-input-resizer-size:var(--t-element-size-sm);
1096
- --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");
1097
- }
856
+ --tds-radio-label-color:var(--t-form-color);
1098
857
 
1099
- @supports (x: attr(x type(*))){
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);
1100
861
 
1101
- .tds-input:has(textarea){
1102
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
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;
1103
872
  }
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);
1104
880
  }
1105
881
 
1106
- .tds-input.tds-textarea--resize-vertical textarea{
1107
- resize:vertical;
1108
- }
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
+ }
1109
900
 
1110
- .tds-input.tds-textarea--resize-none textarea{
1111
- resize:none;
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);
1112
904
  }
1113
905
 
1114
- .tds-input.tds-textarea--resize-auto textarea{
1115
- resize:vertical;
906
+ :is(.tds-radio input[type="radio"]):focus-visible{
907
+ outline:var(--t-focus-ring-outline);
908
+ outline-offset:var(--t-focus-ring-offset);
1116
909
  }
1117
910
 
1118
- @supports (field-sizing: content){
1119
- .tds-input.tds-textarea--resize-auto textarea{
1120
- field-sizing:content;
1121
- resize:none;
1122
- }
911
+ :is(.tds-radio input[type="radio"]):disabled{
912
+ pointer-events:none;
1123
913
  }
1124
914
 
1125
- .tds-input textarea{
1126
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1127
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1128
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1129
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1130
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1131
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1132
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1133
- --tds-input-scrollbar-thumb-border-radius:999px;
1134
- --tds-input-scrollbar-thumb-border-width:3px;
1135
- --tds-input-scrollbar-track-margin-block:.125rem;
1136
- scrollbar-color:initial;
1137
- transition-timing-function:var(--t-ease-in-out);
1138
- transition-duration:var(--t-duration-200);
1139
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1140
- }
915
+ @media (prefers-reduced-motion: reduce){
1141
916
 
1142
- @media (pointer: fine){
1143
- :is(.tds-input textarea)::-webkit-scrollbar{
1144
- width:12px;
1145
- height:12px;
1146
- cursor:default;
917
+ .tds-radio input[type="radio"]{
918
+ --tds-radio-transition-property:none;
919
+ }
1147
920
  }
1148
921
 
1149
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1150
- cursor:default;
1151
- background:var(--tds-input-scrollbar-thumb-color);
1152
- background-clip:content-box;
1153
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1154
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1155
- }
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
+ }
1156
927
 
1157
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1158
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
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);
1159
931
  }
1160
932
 
1161
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1162
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1163
- }
933
+ .tds-radio:has(input:user-invalid){
934
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
935
+ }
1164
936
 
1165
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1166
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
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);
1167
940
  }
1168
941
 
1169
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1170
- background:var(--tds-input-scrollbar-surface-color);
1171
- }
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);
1172
945
 
1173
- :is(.tds-input textarea)::-webkit-resizer{
1174
- background:var(--tds-input-resizer-icon) no-repeat;
1175
- background-position:right bottom;
1176
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1177
- }
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
+ }
1178
950
 
1179
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1180
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1181
- cursor:default;
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);
1182
954
  }
1183
955
 
1184
- @supports (-moz-appearance: none){
1185
- :is(.tds-input textarea){
1186
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1187
- scrollbar-width:thin;
1188
- }
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
+ }
1189
967
 
1190
- @media (hover){
1191
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1192
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1193
- }
1194
- }
1195
- }
1196
- }
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
+ }
1197
975
 
1198
976
  .tds-radio-group{
1199
977
  --tds-radio-group-font-size:var(--t-font-size-md);
@@ -1268,43 +1046,124 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1268
1046
  cursor:text;
1269
1047
  }
1270
1048
 
1271
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1272
- display:var(--tds-radio-group-description-invalid-icon-display);
1273
- flex-shrink:0;
1274
- margin-top:calc(.5lh - .5em);
1275
- line-height:var(--tds-radio-group-description-line-height);
1276
- }
1049
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1050
+ display:var(--tds-radio-group-description-invalid-icon-display);
1051
+ flex-shrink:0;
1052
+ margin-top:calc(.5lh - .5em);
1053
+ line-height:var(--tds-radio-group-description-line-height);
1054
+ }
1055
+
1056
+ .tds-radio-group--sm{
1057
+ --tds-radio-group-line-height:1.35;
1058
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1059
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1060
+ --tds-radio-group-description-line-height:1.3;
1061
+ }
1062
+
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
+ }
1068
+
1069
+ @supports (x: attr(x type(*))){
1070
+
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
+ }
1075
+
1076
+ .tds-input.tds-textarea--resize-vertical textarea{
1077
+ resize:vertical;
1078
+ }
1079
+
1080
+ .tds-input.tds-textarea--resize-none textarea{
1081
+ resize:none;
1082
+ }
1083
+
1084
+ .tds-input.tds-textarea--resize-auto textarea{
1085
+ resize:vertical;
1086
+ }
1087
+
1088
+ @supports (field-sizing: content){
1089
+ .tds-input.tds-textarea--resize-auto textarea{
1090
+ field-sizing:content;
1091
+ resize:none;
1092
+ }
1093
+ }
1094
+
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
+ }
1111
+
1112
+ @media (pointer: fine){
1113
+ :is(.tds-input textarea)::-webkit-scrollbar{
1114
+ width:12px;
1115
+ height:12px;
1116
+ cursor:default;
1117
+ }
1118
+
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
+ }
1126
+
1127
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1128
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1129
+ }
1277
1130
 
1278
- .tds-radio-group--sm{
1279
- --tds-radio-group-line-height:1.35;
1280
- --tds-radio-group-font-size:var(--t-font-size-sm);
1281
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1282
- --tds-radio-group-description-line-height:1.3;
1283
- }
1131
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1132
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1133
+ }
1284
1134
 
1135
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1136
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1137
+ }
1285
1138
 
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;
1139
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1140
+ background:var(--tds-input-scrollbar-surface-color);
1289
1141
  }
1290
1142
 
1291
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1292
- inline-size:1em;
1293
- block-size:2em;
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);
1294
1147
  }
1295
1148
 
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
- }
1149
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1150
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1151
+ cursor:default;
1152
+ }
1302
1153
 
1303
- .tds-input--auto-width input{
1304
- field-sizing:content;
1305
- inline-size:auto;
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
+ }
1159
+
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
+ }
1165
+ }
1306
1166
  }
1307
- }
1308
1167
 
1309
1168
  .tds-select{
1310
1169
  --tds-select-border-color:var(--t-form-border-color);
@@ -1616,6 +1475,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1616
1475
  overflow:auto;
1617
1476
  overflow-x:hidden;
1618
1477
  scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1478
+ overscroll-behavior:none;
1619
1479
  -webkit-user-select:none;
1620
1480
  -moz-user-select:none;
1621
1481
  user-select:none;
@@ -1712,6 +1572,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1712
1572
  overflow:auto;
1713
1573
  overflow-x:hidden;
1714
1574
  scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1575
+ overscroll-behavior:none;
1715
1576
  -webkit-user-select:none;
1716
1577
  -moz-user-select:none;
1717
1578
  user-select:none;
@@ -1738,6 +1599,147 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1738
1599
  }
1739
1600
  }
1740
1601
 
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);
1610
+
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);
1616
+
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
+
1741
1743
  .tds-input{
1742
1744
  --tds-input-border-color:var(--t-form-border-color);
1743
1745
  --tds-input-border-color-hover:var(--t-form-border-color-hover);
@@ -3681,18 +3683,19 @@ a[class="tds-btn"]{
3681
3683
  line-height:1.35;
3682
3684
  }
3683
3685
 
3684
- .tds-time-field{
3685
- --tds-time-field-border-color:var(--t-form-border-color);
3686
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3687
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3688
- --tds-time-field-background-color:var(--t-form-background-color);
3689
- --tds-time-field-color:var(--t-form-color);
3690
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3691
- --tds-time-field-font-size:var(--t-font-size-md);
3692
- --tds-time-field-min-height:var(--t-container-size-md);
3693
- --tds-time-field-padding-block:6px;
3694
- --tds-time-field-description-color:var(--t-text-color-secondary);
3695
- --tds-time-field-description-invalid-icon-display:none;
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;
3696
3699
 
3697
3700
  position:relative;
3698
3701
  display:flex;
@@ -3700,135 +3703,291 @@ a[class="tds-btn"]{
3700
3703
  gap:var(--t-spacing-half);
3701
3704
  }
3702
3705
 
3703
- .tds-time-field[data-required] .tds-time-field-label::after{
3706
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3704
3707
  margin-left:.25ch;
3705
3708
  color:var(--t-text-color-status-error);
3706
3709
  content:"*";
3707
3710
  }
3708
3711
 
3709
- .tds-time-field[data-invalid]{
3710
- --tds-time-field-border-color:var(--t-form-border-color-error);
3711
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3712
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3713
- --tds-time-field-background-color:var(--t-form-background-color-error);
3714
- --tds-time-field-description-color:var(--t-text-color-status-error);
3715
- --tds-time-field-description-invalid-icon-display:inline-block;
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;
3716
3719
  }
3717
3720
 
3718
- .tds-time-field[data-disabled]{
3719
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3720
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3721
- --tds-time-field-color:var(--t-form-color-disabled);
3722
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
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);
3723
3726
  }
3724
3727
 
3725
- .tds-time-field[data-disabled] .tds-time-field-label{
3726
- color:var(--t-form-color-disabled);
3727
- }
3728
-
3729
- .tds-time-field[data-disabled] .tds-time-field-input{
3728
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3730
3729
  cursor:not-allowed;
3731
3730
  }
3732
3731
 
3733
- .tds-time-field--lg{
3734
- --tds-time-field-min-height:var(--t-container-size-lg);
3735
- --tds-time-field-font-size:var(--t-font-size-lg);
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;
3736
3736
  }
3737
3737
 
3738
- .tds-time-field-label{
3738
+ .tds-date-picker-label{
3739
3739
  font-size:var(--t-font-size-md);
3740
3740
  font-weight:var(--t-font-weight-normal);
3741
3741
  color:var(--t-text-color);
3742
3742
  cursor:default;
3743
3743
  }
3744
3744
 
3745
- .tds-time-field-input{
3745
+ .tds-date-picker-field{
3746
3746
  display:flex;
3747
3747
  align-items:center;
3748
3748
  inline-size:100%;
3749
- min-block-size:var(--tds-time-field-min-height);
3750
- padding-block:var(--tds-time-field-padding-block);
3751
- padding-inline:var(--t-spacing-1);
3749
+ min-block-size:var(--tds-date-picker-min-height);
3752
3750
  font-family:inherit;
3753
- font-size:var(--tds-time-field-font-size);
3754
- font-variant-numeric:tabular-nums;
3751
+ font-size:var(--tds-date-picker-font-size);
3755
3752
  line-height:1;
3756
- color:var(--tds-time-field-color);
3753
+ color:var(--tds-date-picker-color);
3754
+ -webkit-appearance:none;
3755
+ -moz-appearance:none;
3756
+ appearance:none;
3757
3757
  cursor:text;
3758
3758
  outline:var(--t-focus-ring-width) solid transparent;
3759
3759
  outline-offset:0;
3760
- background-color:var(--tds-time-field-background-color);
3761
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3760
+ background-color:var(--tds-date-picker-background-color);
3761
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3762
3762
  border-radius:var(--t-form-border-radius);
3763
3763
  }
3764
3764
 
3765
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3766
- border-color:var(--tds-time-field-border-color-hover);
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
3767
  }
3768
3768
 
3769
- .tds-time-field-input[data-focus-within]{
3769
+ .tds-date-picker-field[data-focus-within]{
3770
3770
  outline-color:var(--t-focus-ring-color);
3771
3771
  outline-offset:var(--t-focus-ring-offset);
3772
- border-color:var(--tds-time-field-border-color-active);
3772
+ border-color:var(--tds-date-picker-border-color-active);
3773
3773
  }
3774
3774
 
3775
- .tds-time-field-input[data-readonly]{
3775
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3776
3776
  color:var(--t-form-color-readonly);
3777
3777
  background-color:var(--t-form-background-color-readonly);
3778
3778
  border-color:var(--t-form-border-color-readonly);
3779
3779
  }
3780
3780
 
3781
- .tds-time-field-input[data-readonly][data-hovered]{
3781
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3782
3782
  border-color:var(--t-form-border-color-readonly);
3783
3783
  }
3784
3784
 
3785
- .tds-time-field-input[data-readonly][data-focus-within]{
3785
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3786
3786
  outline-color:var(--t-focus-ring-color);
3787
3787
  outline-offset:var(--t-focus-ring-offset);
3788
3788
  border-color:var(--t-form-border-color-hover);
3789
3789
  }
3790
3790
 
3791
- .tds-time-field-segment{
3792
- padding-inline:1px;
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
3795
  font-variant-numeric:tabular-nums;
3794
- cursor:text;
3796
+ }
3797
+
3798
+ .tds-date-picker-segment{
3799
+ padding-inline:2px;
3795
3800
  caret-color:transparent;
3796
3801
  border-radius:var(--t-border-radius-sm);
3797
3802
  }
3798
3803
 
3799
- .tds-time-field-segment[data-placeholder]{
3800
- color:var(--tds-time-field-placeholder-color);
3804
+ .tds-date-picker-segment[data-placeholder]{
3805
+ color:var(--tds-date-picker-placeholder-color);
3801
3806
  }
3802
3807
 
3803
- .tds-time-field-segment[data-focused]{
3808
+ .tds-date-picker-segment[data-focused]{
3804
3809
  color:var(--t-text-color-inverted);
3805
3810
  outline:0;
3806
3811
  background:var(--t-fill-color-interaction);
3807
3812
  }
3808
3813
 
3809
- .tds-time-field-segment-separator{
3814
+ .tds-date-picker-segment-separator{
3810
3815
  padding-inline:0;
3811
- color:var(--tds-time-field-placeholder-color);
3816
+ color:var(--tds-date-picker-placeholder-color);
3812
3817
  }
3813
3818
 
3814
- .tds-time-field-description{
3819
+ .tds-date-picker-description{
3815
3820
  display:flex;
3816
3821
  gap:var(--t-spacing-half);
3817
3822
  align-items:flex-start;
3818
3823
  margin:0;
3819
3824
  font-size:var(--t-font-size-sm);
3820
3825
  line-height:1.35;
3821
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3826
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3822
3827
  cursor:text;
3823
3828
  }
3824
3829
 
3825
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3826
- display:var(--tds-time-field-description-invalid-icon-display, none);
3830
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3831
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3827
3832
  flex-shrink:0;
3828
3833
  margin-block-start:calc(.5lh - .5em);
3829
3834
  line-height:1.35;
3830
3835
  }
3831
3836
 
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
+
3832
3991
  .tds-number-stepper{
3833
3992
  --tds-number-stepper-border-color:var(--t-form-border-color);
3834
3993
  --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
@@ -3982,19 +4141,18 @@ a[class="tds-btn"]{
3982
4141
  line-height:1.35;
3983
4142
  }
3984
4143
 
3985
- .tds-date-picker{
3986
- --tds-date-picker-border-color:var(--t-form-border-color);
3987
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3988
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3989
- --tds-date-picker-background-color:var(--t-form-background-color);
3990
- --tds-date-picker-color:var(--t-form-color);
3991
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3992
- --tds-date-picker-font-size:var(--t-font-size-md);
3993
- --tds-date-picker-min-height:var(--t-container-size-md);
3994
- --tds-date-picker-padding-block:6px;
3995
- --tds-date-picker-button-offset:4px;
3996
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3997
- --tds-date-picker-description-invalid-icon-display:none;
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;
3998
4156
 
3999
4157
  position:relative;
4000
4158
  display:flex;
@@ -4002,291 +4160,135 @@ a[class="tds-btn"]{
4002
4160
  gap:var(--t-spacing-half);
4003
4161
  }
4004
4162
 
4005
- .tds-date-picker[data-required] .tds-date-picker-label::after{
4163
+ .tds-time-field[data-required] .tds-time-field-label::after{
4006
4164
  margin-left:.25ch;
4007
4165
  color:var(--t-text-color-status-error);
4008
4166
  content:"*";
4009
4167
  }
4010
4168
 
4011
- .tds-date-picker[data-invalid]{
4012
- --tds-date-picker-border-color:var(--t-form-border-color-error);
4013
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
4014
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
4015
- --tds-date-picker-background-color:var(--t-form-background-color-error);
4016
- --tds-date-picker-description-color:var(--t-text-color-status-error);
4017
- --tds-date-picker-description-invalid-icon-display:inline-block;
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;
4018
4176
  }
4019
4177
 
4020
- .tds-date-picker[data-disabled]{
4021
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
4022
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
4023
- --tds-date-picker-color:var(--t-form-color-disabled);
4024
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
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);
4025
4183
  }
4026
4184
 
4027
- .tds-date-picker[data-disabled] .tds-date-picker-field{
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{
4028
4190
  cursor:not-allowed;
4029
4191
  }
4030
4192
 
4031
- .tds-date-picker--lg{
4032
- --tds-date-picker-min-height:var(--t-container-size-lg);
4033
- --tds-date-picker-font-size:var(--t-font-size-lg);
4034
- --tds-date-picker-button-offset:5px;
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);
4035
4196
  }
4036
4197
 
4037
- .tds-date-picker-label{
4198
+ .tds-time-field-label{
4038
4199
  font-size:var(--t-font-size-md);
4039
4200
  font-weight:var(--t-font-weight-normal);
4040
4201
  color:var(--t-text-color);
4041
4202
  cursor:default;
4042
4203
  }
4043
4204
 
4044
- .tds-date-picker-field{
4205
+ .tds-time-field-input{
4045
4206
  display:flex;
4046
4207
  align-items:center;
4047
4208
  inline-size:100%;
4048
- min-block-size:var(--tds-date-picker-min-height);
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);
4049
4212
  font-family:inherit;
4050
- font-size:var(--tds-date-picker-font-size);
4213
+ font-size:var(--tds-time-field-font-size);
4214
+ font-variant-numeric:tabular-nums;
4051
4215
  line-height:1;
4052
- color:var(--tds-date-picker-color);
4053
- -webkit-appearance:none;
4054
- -moz-appearance:none;
4055
- appearance:none;
4216
+ color:var(--tds-time-field-color);
4056
4217
  cursor:text;
4057
4218
  outline:var(--t-focus-ring-width) solid transparent;
4058
4219
  outline-offset:0;
4059
- background-color:var(--tds-date-picker-background-color);
4060
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
4220
+ background-color:var(--tds-time-field-background-color);
4221
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4061
4222
  border-radius:var(--t-form-border-radius);
4062
4223
  }
4063
4224
 
4064
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4065
- border-color:var(--tds-date-picker-border-color-hover);
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
4227
  }
4067
4228
 
4068
- .tds-date-picker-field[data-focus-within]{
4229
+ .tds-time-field-input[data-focus-within]{
4069
4230
  outline-color:var(--t-focus-ring-color);
4070
4231
  outline-offset:var(--t-focus-ring-offset);
4071
- border-color:var(--tds-date-picker-border-color-active);
4232
+ border-color:var(--tds-time-field-border-color-active);
4072
4233
  }
4073
4234
 
4074
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
4235
+ .tds-time-field-input[data-readonly]{
4075
4236
  color:var(--t-form-color-readonly);
4076
4237
  background-color:var(--t-form-background-color-readonly);
4077
4238
  border-color:var(--t-form-border-color-readonly);
4078
4239
  }
4079
4240
 
4080
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
4241
+ .tds-time-field-input[data-readonly][data-hovered]{
4081
4242
  border-color:var(--t-form-border-color-readonly);
4082
4243
  }
4083
4244
 
4084
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4245
+ .tds-time-field-input[data-readonly][data-focus-within]{
4085
4246
  outline-color:var(--t-focus-ring-color);
4086
4247
  outline-offset:var(--t-focus-ring-offset);
4087
4248
  border-color:var(--t-form-border-color-hover);
4088
4249
  }
4089
4250
 
4090
- .tds-date-picker-input{
4091
- flex:1;
4092
- padding-block:var(--tds-date-picker-padding-block);
4093
- padding-inline-start:var(--t-spacing-1);
4251
+ .tds-time-field-segment{
4252
+ padding-inline:1px;
4094
4253
  font-variant-numeric:tabular-nums;
4095
- }
4096
-
4097
- .tds-date-picker-segment{
4098
- padding-inline:2px;
4254
+ cursor:text;
4099
4255
  caret-color:transparent;
4100
4256
  border-radius:var(--t-border-radius-sm);
4101
4257
  }
4102
4258
 
4103
- .tds-date-picker-segment[data-placeholder]{
4104
- color:var(--tds-date-picker-placeholder-color);
4259
+ .tds-time-field-segment[data-placeholder]{
4260
+ color:var(--tds-time-field-placeholder-color);
4105
4261
  }
4106
4262
 
4107
- .tds-date-picker-segment[data-focused]{
4263
+ .tds-time-field-segment[data-focused]{
4108
4264
  color:var(--t-text-color-inverted);
4109
4265
  outline:0;
4110
4266
  background:var(--t-fill-color-interaction);
4111
4267
  }
4112
4268
 
4113
- .tds-date-picker-segment-separator{
4269
+ .tds-time-field-segment-separator{
4114
4270
  padding-inline:0;
4115
- color:var(--tds-date-picker-placeholder-color);
4271
+ color:var(--tds-time-field-placeholder-color);
4116
4272
  }
4117
4273
 
4118
- .tds-date-picker-description{
4274
+ .tds-time-field-description{
4119
4275
  display:flex;
4120
4276
  gap:var(--t-spacing-half);
4121
4277
  align-items:flex-start;
4122
4278
  margin:0;
4123
4279
  font-size:var(--t-font-size-sm);
4124
4280
  line-height:1.35;
4125
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
4281
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4126
4282
  cursor:text;
4127
4283
  }
4128
4284
 
4129
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
4130
- display:var(--tds-date-picker-description-invalid-icon-display, none);
4285
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4286
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4131
4287
  flex-shrink:0;
4132
4288
  margin-block-start:calc(.5lh - .5em);
4133
4289
  line-height:1.35;
4134
4290
  }
4135
4291
 
4136
- .tds-date-picker-button{
4137
- flex-shrink:0;
4138
- align-self:center;
4139
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4140
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4141
- padding:0;
4142
- margin-inline-end:var(--tds-date-picker-button-offset);
4143
- }
4144
-
4145
- .tds-date-picker-popover{
4146
- padding:var(--t-spacing-2);
4147
- background:var(--t-surface-color-card);
4148
- border:1px solid var(--t-border-color);
4149
- border-radius:var(--t-border-radius);
4150
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4151
- }
4152
-
4153
- .tds-date-picker-popover[data-entering]{
4154
- animation:tds-date-picker-popover-enter 160ms ease;
4155
- }
4156
-
4157
- .tds-date-picker-popover[data-exiting]{
4158
- animation:tds-date-picker-popover-exit 130ms ease;
4159
- }
4160
-
4161
- @keyframes tds-date-picker-popover-enter{
4162
- from{
4163
- opacity:0;
4164
- transform:translateY(-8px);
4165
- }
4166
- }
4167
-
4168
- @keyframes tds-date-picker-popover-exit{
4169
- to{
4170
- opacity:0;
4171
- transform:translateY(-8px);
4172
- }
4173
- }
4174
-
4175
- @media (prefers-reduced-motion: reduce){
4176
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
4177
- animation:none;
4178
- }
4179
- }
4180
-
4181
- .tds-date-picker-calendar{
4182
- inline-size:-moz-fit-content;
4183
- inline-size:fit-content;
4184
- }
4185
-
4186
- .tds-date-picker-calendar-header{
4187
- display:flex;
4188
- align-items:center;
4189
- justify-content:space-between;
4190
- padding-block-end:var(--t-spacing-1);
4191
- }
4192
-
4193
- .tds-date-picker-calendar-title{
4194
- flex:1;
4195
- margin:0;
4196
- font-size:var(--t-font-size-md);
4197
- font-weight:var(--t-font-weight-semibold);
4198
- text-align:center;
4199
- }
4200
-
4201
- .tds-date-picker-calendar-nav{
4202
- display:flex;
4203
- align-items:center;
4204
- justify-content:center;
4205
- padding:var(--t-spacing-half);
4206
- color:var(--t-text-color);
4207
- cursor:default;
4208
- outline:0;
4209
- background:transparent;
4210
- border:0;
4211
- border-radius:var(--t-border-radius-sm);
4212
- }
4213
-
4214
- .tds-date-picker-calendar-nav[data-hovered]{
4215
- background:var(--t-fill-color-neutral-070);
4216
- }
4217
-
4218
- .tds-date-picker-calendar-nav[data-pressed]{
4219
- background:var(--t-fill-color-button-interaction-ghost-active);
4220
- }
4221
-
4222
- .tds-date-picker-calendar-nav[data-focus-visible]{
4223
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4224
- outline-offset:var(--t-focus-ring-offset);
4225
- }
4226
-
4227
- .tds-date-picker-calendar-nav[data-disabled]{
4228
- color:var(--t-form-color-disabled);
4229
- cursor:not-allowed;
4230
- }
4231
-
4232
- .tds-date-picker-calendar-grid{
4233
- border-collapse:collapse;
4234
- }
4235
-
4236
- .tds-date-picker-calendar-header-cell{
4237
- padding-block:var(--t-spacing-half);
4238
- font-size:var(--t-font-size-sm);
4239
- font-weight:var(--t-font-weight-normal);
4240
- color:var(--t-text-color-secondary);
4241
- text-align:center;
4242
- }
4243
-
4244
- .tds-date-picker-calendar-cell{
4245
- display:flex;
4246
- align-items:center;
4247
- justify-content:center;
4248
- inline-size:2.25rem;
4249
- block-size:2.25rem;
4250
- font-size:var(--t-font-size-md);
4251
- color:var(--t-text-color);
4252
- cursor:default;
4253
- outline:0;
4254
- border-radius:var(--t-border-radius-sm);
4255
- }
4256
-
4257
- .tds-date-picker-calendar-cell[data-hovered]{
4258
- background:var(--t-fill-color-neutral-070);
4259
- }
4260
-
4261
- .tds-date-picker-calendar-cell[data-pressed]{
4262
- background:var(--t-fill-color-button-interaction-ghost-active);
4263
- }
4264
-
4265
- .tds-date-picker-calendar-cell[data-selected]{
4266
- color:var(--t-text-color-inverted);
4267
- background:var(--t-fill-color-interaction);
4268
- }
4269
-
4270
- .tds-date-picker-calendar-cell[data-focus-visible]{
4271
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4272
- outline-offset:var(--t-focus-ring-offset);
4273
- }
4274
-
4275
- .tds-date-picker-calendar-cell[data-unavailable]{
4276
- color:var(--t-text-color-secondary);
4277
- text-decoration:line-through;
4278
- cursor:not-allowed;
4279
- }
4280
-
4281
- .tds-date-picker-calendar-cell[data-disabled]{
4282
- color:var(--t-form-color-disabled);
4283
- cursor:not-allowed;
4284
- }
4285
-
4286
- .tds-date-picker-calendar-cell[data-outside-month]{
4287
- color:var(--t-text-color-secondary);
4288
- }
4289
-
4290
4292
  .t-banner{
4291
4293
  --t-banner-font-size:var(--t-font-size-md);
4292
4294
  --t-banner-font-color:var(--t-text-color);