@planningcenter/tapestry 3.2.2 → 3.2.3-qa-826.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.css +17 -2
  2. package/dist/index.css.map +1 -1
  3. package/dist/reactRender.css +935 -920
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +935 -920
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/unstable.css +17 -2
  8. package/dist/unstable.css.map +1 -1
  9. package/package.json +5 -5
package/dist/reactRender.css CHANGED
@@ -1,422 +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
-
265
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
266
- -webkit-appearance:none;
267
- appearance:none;
268
- }
269
-
270
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
271
- inline-size:1em;
272
- block-size:2em;
273
- }
274
-
275
- @supports (field-sizing: content){
276
- .tds-input--auto-width{
277
- inline-size:-moz-fit-content;
278
- inline-size:fit-content;
279
- min-inline-size:min(100%, 122px);
280
- }
281
-
282
- .tds-input--auto-width input{
283
- field-sizing:content;
284
- inline-size:auto;
285
- }
286
- }
287
-
288
- .tds-radio{
289
- --tds-radio-font-size:var(--t-font-size-md);
290
- --tds-radio-cursor:pointer;
291
- --tds-radio-line-height:1.4;
292
- --tds-radio-transition-property:border-width;
293
-
294
- --tds-radio-input-size:var(--t-element-size-md);
295
- --tds-radio-input-border-radius:var(--t-border-radius-round);
296
- --tds-radio-input-border-color:var(--t-form-border-color);
297
- --tds-radio-input-border-width:var(--t-form-border-width);
298
- --tds-radio-input-background-color:transparent;
299
-
300
- --tds-radio-label-color:var(--t-form-color);
301
-
302
- --tds-radio-description-font-size:var(--t-font-size-sm);
303
- --tds-radio-description-line-height:1.35;
304
- --tds-radio-description-color:var(--t-text-color-secondary);
305
-
306
- position:relative;
307
- display:inline-grid;
308
- grid-template-columns:auto;
309
- grid-auto-columns:1fr;
310
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
311
- line-height:var(--tds-radio-line-height);
312
- cursor:var(--tds-radio-cursor);
313
- -webkit-user-select:none;
314
- -moz-user-select:none;
315
- user-select:none;
316
- }
317
-
318
- .tds-radio label{
319
- grid-area:1 / 2;
320
- font-size:var(--tds-radio-font-size);
321
- font-weight:var(--t-font-weight-normal);
322
- color:var(--tds-radio-label-color);
323
- cursor:var(--tds-radio-cursor);
324
- }
325
-
326
- .tds-radio input[type="radio"]{
327
- position:relative;
328
- width:1em;
329
- height:1em;
330
- margin:calc((1lh - 1em) / 2) 0 0;
331
- font-size:var(--tds-radio-font-size);
332
- line-height:inherit;
333
- -webkit-appearance:none;
334
- -moz-appearance:none;
335
- appearance:none;
336
- cursor:var(--tds-radio-cursor);
337
- background-color:var(--tds-radio-input-background-color);
338
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
339
- border-radius:var(--tds-radio-input-border-radius);
340
- transition-timing-function:var(--t-ease-in-out);
341
- transition-duration:var(--t-duration-200);
342
- transition-property:var(--tds-radio-transition-property);
343
- }
344
-
345
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
346
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
347
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
348
- }
349
-
350
- :is(.tds-radio input[type="radio"]):focus-visible{
351
- outline:var(--t-focus-ring-outline);
352
- outline-offset:var(--t-focus-ring-offset);
353
- }
354
-
355
- :is(.tds-radio input[type="radio"]):disabled{
356
- pointer-events:none;
357
- }
358
-
359
- @media (prefers-reduced-motion: reduce){
360
-
361
- .tds-radio input[type="radio"]{
362
- --tds-radio-transition-property:none;
363
- }
364
- }
365
-
366
- .tds-radio:has(input:checked){
367
- --tds-radio-input-background-color:var(--t-form-background-color);
368
- --tds-radio-input-border-color:var(--t-border-color-control-info);
369
- --tds-radio-input-border-width:4px;
370
- }
371
-
372
- .tds-radio:has(input:checked) input:hover:not(:disabled){
373
- --tds-radio-input-background-color:var(--t-form-background-color);
374
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
375
- }
376
-
377
- .tds-radio:has(input:user-invalid){
378
- --tds-radio-input-border-color:var(--t-form-border-color-error);
379
- }
380
-
381
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
382
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
383
- --tds-radio-input-background-color:var(--t-form-background-color-error);
384
- }
385
-
386
- .tds-radio:has(input:disabled){
387
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
388
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
389
-
390
- --tds-radio-label-color:var(--t-form-color-disabled);
391
- --tds-radio-description-color:var(--t-form-color-disabled);
392
- --tds-radio-cursor:not-allowed;
393
- }
394
-
395
- .tds-radio:has(input:disabled) input:checked{
396
- --tds-radio-input-background-color:var(--t-form-background-color);
397
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
398
- }
399
-
400
- .tds-radio-description{
401
- display:flex;
402
- grid-area:2 / 2;
403
- gap:var(--t-spacing-half);
404
- align-items:flex-start;
405
- margin:0;
406
- font-size:var(--tds-radio-description-font-size);
407
- line-height:var(--tds-radio-description-line-height);
408
- color:var(--tds-radio-description-color);
409
- cursor:text;
410
- }
411
-
412
- .tds-radio--sm{
413
- --tds-radio-line-height:1.35;
414
- --tds-radio-input-size:var(--t-element-size-sm);
415
- --tds-radio-font-size:var(--t-font-size-sm);
416
- --tds-radio-description-font-size:var(--t-font-size-xs);
417
- --tds-radio-description-line-height:1.3;
418
- }
419
-
420
1
 
421
2
  @media (prefers-reduced-motion: no-preference){
422
3
 
@@ -779,232 +360,306 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
779
360
  flex-direction:column;
780
361
  }
781
362
 
782
- .tds-radio-group{
783
- --tds-radio-group-font-size:var(--t-font-size-md);
784
- --tds-radio-group-line-height:1.4;
785
- --tds-radio-group-gap:var(--t-spacing-1);
363
+ @layer t-critical{
364
+ tds-page-header:not(.hydrated){
365
+ display:none;
366
+ }
367
+ }
786
368
 
787
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
369
+ @layer t-component{
370
+ .tds-page-header{
371
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
372
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
373
+ --tds-page-header-color:var(--t-text-color);
374
+ --tds-page-header-bottom-border-color:transparent;
375
+ --tds-page-header-headline-color:var(--t-text-color-headline);
376
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
377
+ --tds-page-header-padding-x:var(--t-spacing-2);
378
+ --tds-page-header-padding-y:var(--t-spacing-2);
379
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
380
+ --tds-page-header-nav-gap:var(--t-spacing-1);
381
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
382
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
383
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
384
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
385
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
386
+ --tds-page-header-nav-item-border-width:1px;
788
387
 
789
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
790
- --tds-radio-group-description-line-height:1.35;
791
- --tds-radio-group-description-color:var(--t-text-color-secondary);
792
- --tds-radio-group-description-invalid-icon-display:none;
388
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
389
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
390
+
391
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
392
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
393
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
394
+
395
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
396
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
397
+
398
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
399
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
400
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
401
+
402
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
403
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
404
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
405
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
406
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
407
+ }
408
+
409
+ .tds-page-header--profile{
410
+ --tds-page-header-padding-y:20px;
411
+ }
412
+
413
+ @supports (color: light-dark(#fff, #000)){
414
+ .tds-page-header{
415
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
416
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
417
+ }
418
+ }
419
+
420
+ @media (min-width: 600px){
421
+ .tds-page-header{
422
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
423
+ --tds-page-header-color:var(--t-text-color-secondary);
424
+ --tds-page-header-bottom-border-color:var(--t-border-color);
425
+ --tds-page-header-padding-x:var(--t-spacing-3);
426
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
427
+ --tds-page-header-nav-gap:var(--t-spacing-half);
428
+ --tds-page-header-nav-background:transparent;
429
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
430
+ --tds-page-header-nav-item-border-width:1px;
431
+ --tds-page-header-nav-item-color:var(--t-text-color);
432
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
433
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
434
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
435
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
436
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
437
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
438
+ }
439
+ }
440
+ }
441
+
442
+ .tds-page-header{
793
443
  display:flex;
794
444
  flex-direction:column;
795
- gap:var(--tds-radio-group-gap);
796
- padding:0;
797
- margin:0;
445
+ padding-top:var(--tds-page-header-padding-y);
446
+ color:var(--tds-page-header-color);
447
+ background:var(--tds-page-header-background-color);
448
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
449
+ }
450
+
451
+ .tds-page-header:not(.has-nav){
452
+ padding-bottom:var(--tds-page-header-padding-y);
453
+ }
454
+
455
+ .tds-page-header.inactive{
456
+ background:var(--tds-page-header-background-color-inactive);
457
+ }
458
+
459
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
460
+ width:100%;
461
+ }
462
+
463
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
464
+ display:flex;
465
+ flex-flow:row wrap;
466
+ gap:var(--t-spacing-half) var(--t-spacing-1);
467
+ align-items:flex-start;
468
+ justify-content:flex-start;
469
+ min-width:0;
470
+ }
471
+
472
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
473
+ display:flex;
474
+ gap:var(--tds-page-header-nav-gap);
475
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
476
+ margin:0 0 -1px;
477
+ overflow:auto;
478
+ list-style:none;
479
+ background:var(--tds-page-header-nav-background);
480
+ }
481
+
482
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
483
+ position:relative;
484
+ display:inline-flex;
485
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
486
+ font-size:var(--t-font-size-sm);
487
+ line-height:22px;
488
+ color:var(--tds-page-header-nav-item-color);
489
+ white-space:nowrap;
490
+ text-decoration:none;
491
+ -webkit-appearance:none;
492
+ -moz-appearance:none;
493
+ appearance:none;
494
+ cursor:pointer;
495
+ outline-offset:-2px;
496
+ background-color:var(--tds-page-header-nav-item-background-color);
497
+ background-clip:padding-box;
498
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
499
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
500
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
501
+ }
798
502
 
799
- font-size:var(--tds-radio-group-font-size);
800
- line-height:var(--tds-radio-group-line-height);
801
- border:0;
802
- }
503
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
504
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
505
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
506
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
507
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
508
+ }
803
509
 
804
- .tds-radio-group legend{
805
- padding:0;
806
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
807
- }
510
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
511
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
512
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
513
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
514
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
515
+ }
808
516
 
809
- .tds-radio-group:has(.tds-radio-group-description){
810
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
811
- }
517
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
518
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
519
+ background-color:var(--tds-page-header-nav-item-background-color-active);
520
+ border-color:var(--tds-page-header-nav-item-border-color-active);
521
+ }
812
522
 
813
- .tds-radio-group[aria-invalid="true"]{
814
- --tds-radio-group-description-color:var(--t-text-color-status-error);
815
- --tds-radio-group-description-invalid-icon-display:inline-block;
816
- }
523
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
524
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
525
+ color:var(--tds-page-header-nav-item-color-disabled);
526
+ cursor:not-allowed;
527
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
528
+ opacity:1;
529
+ }
817
530
 
818
- .tds-radio-group[aria-invalid="true"] .tds-radio{
819
- --tds-radio-input-border-color:var(--t-form-border-color-error);
531
+ @media (min-width: 600px){
532
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
533
+ position:absolute;
534
+ inset:auto -1px -1px;
535
+ height:1px;
536
+ pointer-events:none;
537
+ content:"";
538
+ background-color:var(--tds-page-header-bottom-border-color);
539
+ }
540
+ }
541
+
542
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
543
+ position:relative;
820
544
  }
821
545
 
822
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
823
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
824
- --tds-radio-input-background-color:var(--t-form-background-color-error);
546
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
547
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
548
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
825
549
  }
826
550
 
827
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
828
- --tds-radio-input-background-color:var(--t-form-background-color);
551
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
552
+ position:absolute;
553
+ top:-5px;
554
+ right:-2px;
555
+ width:10px;
556
+ height:10px;
557
+ content:"";
558
+ background:var(--tds-page-header-nav-item-indicator-color);
559
+ border-radius:50%;
829
560
  }
830
561
 
831
- .tds-radio-group:has(input:required) legend::after{
832
- margin-left:.25ch;
833
- color:var(--t-text-color-status-error);
834
- content:"*";
835
- }
562
+ @media (prefers-reduced-motion: no-preference){
563
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
564
+ animation:indicator-pulse 1.25s ease infinite;
565
+ }
566
+ }
836
567
 
837
- .tds-radio-group-fields{
568
+ .tds-page-header__title-bar{
838
569
  display:flex;
839
570
  flex-direction:column;
840
- gap:var(--tds-radio-group-gap);
841
- align-items:flex-start;
842
- }
843
-
844
- .tds-radio-group-description{
845
- display:flex;
846
- gap:var(--t-spacing-half);
571
+ gap:var(--t-spacing-2) var(--t-spacing-1);
847
572
  align-items:flex-start;
848
- margin:0;
849
- font-size:var(--tds-radio-group-description-font-size);
850
- line-height:var(--tds-radio-group-description-line-height);
851
- color:var(--tds-radio-group-description-color);
852
- cursor:text;
573
+ justify-content:space-between;
574
+ padding:0 var(--tds-page-header-padding-x);
853
575
  }
854
576
 
855
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
856
- display:var(--tds-radio-group-description-invalid-icon-display);
857
- flex-shrink:0;
858
- margin-top:calc(.5lh - .5em);
859
- line-height:var(--tds-radio-group-description-line-height);
577
+ .tds-page-header--profile > .tds-page-header__title-bar{
578
+ align-items:center;
860
579
  }
861
580
 
862
- .tds-radio-group--sm{
863
- --tds-radio-group-line-height:1.35;
864
- --tds-radio-group-font-size:var(--t-font-size-sm);
865
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
866
- --tds-radio-group-description-line-height:1.3;
867
- }
868
-
869
- .tds-toggle-switch{
870
- --tds-toggle-switch-font-size:var(--t-font-size-md);
871
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
872
- --tds-toggle-switch-cursor:pointer;
873
- --tds-toggle-switch-display:inline-grid;
874
- --tds-toggle-switch-line-height:1.4;
875
-
876
- --tds-toggle-switch-label-color:var(--t-form-color);
877
-
878
- --tds-toggle-switch-track-width:var(--t-container-size-md);
879
- --tds-toggle-switch-track-outline:none;
880
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
881
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
882
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
883
-
884
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
885
- --tds-toggle-switch-thumb-transform:translateX(0);
886
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
887
-
888
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
889
- --tds-toggle-switch-description-line-height:1.35;
890
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
891
- position:relative;
892
-
893
- display:var(--tds-toggle-switch-display);
894
- grid-template-columns:auto;
895
- grid-auto-columns:1fr;
896
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
897
- -webkit-user-select:none;
898
- -moz-user-select:none;
899
- user-select:none;
581
+ .tds-page-header__primary{
582
+ width:100%;
900
583
  }
901
584
 
902
- .tds-toggle-switch input[type="checkbox"]{
903
- position:absolute;
904
- width:var(--tds-toggle-switch-track-width);
905
- height:var(--tds-toggle-switch-track-height);
585
+ .tds-page-header__primary h1{
906
586
  margin:0;
907
- -webkit-appearance:none;
908
- -moz-appearance:none;
909
- appearance:none;
910
- cursor:var(--tds-toggle-switch-cursor);
911
- outline:var(--tds-toggle-switch-track-outline);
912
- outline-offset:var(--t-focus-ring-offset);
913
- background-color:transparent;
914
- border:0;
915
- border-radius:var(--t-border-radius-round);
916
- }
917
-
918
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
919
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
920
- }
921
-
922
- .tds-toggle-switch label{
923
- display:inline-flex;
924
- grid-area:1 / 2;
925
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
926
- column-gap:var(--tds-toggle-switch-column-gap);
927
- margin-top:-.09375em;
928
- font-size:var(--tds-toggle-switch-font-size);
587
+ font-size:var(--tds-page-header-headline-font-size);
929
588
  font-weight:var(--t-font-weight-normal);
930
- line-height:var(--tds-toggle-switch-line-height);
931
- color:var(--tds-toggle-switch-label-color);
932
- cursor:var(--tds-toggle-switch-cursor);
589
+ line-height:32px;
590
+ color:var(--tds-page-header-headline-color);
591
+ overflow-wrap:break-word;
933
592
  }
934
593
 
935
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
936
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
594
+ @media (min-width: 960px){
595
+ .tds-page-header__primary{
596
+ flex:1 1 max-content;
597
+ width:auto;
598
+ min-width:0;
599
+ max-width:100%;
937
600
  }
938
601
 
939
- .tds-toggle-switch:has(input:checked){
940
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
941
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
602
+ .tds-page-header__title-bar,
603
+ .tds-page-header--profile .tds-page-header__title-bar{
604
+ flex-flow:row nowrap;
605
+ row-gap:12px;
606
+ align-items:flex-start;
942
607
  }
943
-
944
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
945
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
608
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
609
+ width:auto;
946
610
  }
947
611
 
948
- .tds-toggle-switch:has(input:disabled){
949
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
950
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
951
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
952
- --tds-toggle-switch-cursor:not-allowed;
953
- }
954
-
955
- .tds-toggle-switch-track{
956
- position:relative;
957
- flex-shrink:0;
958
- width:var(--tds-toggle-switch-track-width);
959
- height:var(--tds-toggle-switch-track-height);
960
- background-color:var(--tds-toggle-switch-track-background-color);
961
- border-radius:var(--t-border-radius-round);
962
- transition:var(--tds-toggle-switch-track-transition);
612
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
613
+ justify-content:flex-end;
614
+ }
963
615
  }
964
616
 
965
- .tds-toggle-switch-track::before{
966
- position:absolute;
967
- top:var(--t-spacing-fourth);
968
- left:var(--t-spacing-fourth);
969
- width:var(--tds-toggle-switch-thumb-size);
970
- height:var(--tds-toggle-switch-thumb-size);
971
- content:"";
972
- background-color:#fff;
973
- border-radius:var(--t-border-radius-round);
974
- transform:var(--tds-toggle-switch-thumb-transform);
975
- transition:var(--tds-toggle-switch-thumb-transition);
976
- }
977
-
978
- @media (prefers-reduced-motion: reduce){
979
-
980
- .tds-toggle-switch-track{
981
- --tds-toggle-switch-track-transition:none;
982
- --tds-toggle-switch-thumb-transition:none;
617
+ .tds-page-header-phone,
618
+ .tds-page-header-email{
619
+ color:var(--tds-page-header-color);
620
+ white-space:nowrap;
983
621
  }
984
- }
985
622
 
986
- .tds-toggle-switch-description{
987
- display:flex;
988
- grid-area:2 / 2;
989
- align-items:flex-start;
990
- margin:0;
991
- font-size:var(--tds-toggle-switch-description-font-size);
992
- line-height:var(--tds-toggle-switch-description-line-height);
993
- color:var(--tds-toggle-switch-description-color);
994
- cursor:text;
623
+ .tds-page-header-email{
624
+ max-width:100%;
625
+ overflow:hidden;
626
+ text-overflow:ellipsis;
995
627
  }
996
628
 
997
- .tds-toggle-switch--sm{
998
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
999
- --tds-toggle-switch-line-height:1.35;
1000
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1001
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1002
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1003
- --tds-toggle-switch-description-line-height:1.3;
629
+ @keyframes indicator-pulse{
630
+ 0%{
631
+ opacity:.3;
632
+ transform:scale(.9);
633
+ }
634
+
635
+ 100%{
636
+ opacity:0;
637
+ transform:scale(1.75);
638
+ }
1004
639
  }
1005
640
 
1006
- .tds-toggle-switch--hide-label{
1007
- --tds-toggle-switch-display:inline-flex;
641
+
642
+ :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{
643
+ -webkit-appearance:none;
644
+ appearance:none;
645
+ }
646
+
647
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
648
+ inline-size:1em;
649
+ block-size:2em;
650
+ }
651
+
652
+ @supports (field-sizing: content){
653
+ .tds-input--auto-width{
654
+ inline-size:-moz-fit-content;
655
+ inline-size:fit-content;
656
+ min-inline-size:min(100%, 122px);
657
+ }
658
+
659
+ .tds-input--auto-width input{
660
+ field-sizing:content;
661
+ inline-size:auto;
662
+ }
1008
663
  }
1009
664
 
1010
665
  .tds-checkbox{
@@ -1130,181 +785,436 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1130
785
  --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1131
786
  }
1132
787
 
1133
- .tds-checkbox:has(input:indeterminate){
1134
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
788
+ .tds-checkbox:has(input:indeterminate){
789
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
790
+ }
791
+
792
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
793
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
794
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
795
+ --tds-checkbox-description-invalid-icon-display:inline-block;
796
+ }
797
+
798
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
799
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
800
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
801
+ }
802
+
803
+ :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{
804
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
805
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
806
+ }
807
+
808
+ :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){
809
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
810
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
811
+ }
812
+
813
+ .tds-checkbox:has(input:required) label::after{
814
+ margin-left:.25ch;
815
+ color:var(--t-text-color-status-error);
816
+ content:"*";
817
+ }
818
+
819
+ .tds-checkbox:has(input:disabled){
820
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
821
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
822
+
823
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
824
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
825
+ --tds-checkbox-cursor:not-allowed;
826
+ }
827
+
828
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
829
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
830
+ }
831
+
832
+ .tds-checkbox-description{
833
+ display:flex;
834
+ grid-area:2 / 2;
835
+ gap:var(--t-spacing-half);
836
+ align-items:flex-start;
837
+ margin:0;
838
+ font-size:var(--tds-checkbox-description-font-size);
839
+ line-height:var(--tds-checkbox-description-line-height);
840
+ color:var(--tds-checkbox-description-color);
841
+ cursor:text;
842
+ }
843
+
844
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
845
+ display:var(--tds-checkbox-description-invalid-icon-display);
846
+ flex-shrink:0;
847
+ margin-top:calc(.5lh - .5em);
848
+ line-height:var(--tds-checkbox-description-line-height);
849
+ }
850
+
851
+ .tds-checkbox--sm{
852
+ --tds-checkbox-line-height:1.35;
853
+ --tds-checkbox-input-size:var(--t-element-size-sm);
854
+ --tds-checkbox-font-size:var(--t-font-size-sm);
855
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
856
+ --tds-checkbox-description-line-height:1.3;
857
+ }
858
+
859
+ .tds-radio{
860
+ --tds-radio-font-size:var(--t-font-size-md);
861
+ --tds-radio-cursor:pointer;
862
+ --tds-radio-line-height:1.4;
863
+ --tds-radio-transition-property:border-width;
864
+
865
+ --tds-radio-input-size:var(--t-element-size-md);
866
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
867
+ --tds-radio-input-border-color:var(--t-form-border-color);
868
+ --tds-radio-input-border-width:var(--t-form-border-width);
869
+ --tds-radio-input-background-color:transparent;
870
+
871
+ --tds-radio-label-color:var(--t-form-color);
872
+
873
+ --tds-radio-description-font-size:var(--t-font-size-sm);
874
+ --tds-radio-description-line-height:1.35;
875
+ --tds-radio-description-color:var(--t-text-color-secondary);
876
+
877
+ position:relative;
878
+ display:inline-grid;
879
+ grid-template-columns:auto;
880
+ grid-auto-columns:1fr;
881
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
882
+ line-height:var(--tds-radio-line-height);
883
+ cursor:var(--tds-radio-cursor);
884
+ -webkit-user-select:none;
885
+ -moz-user-select:none;
886
+ user-select:none;
887
+ }
888
+
889
+ .tds-radio label{
890
+ grid-area:1 / 2;
891
+ font-size:var(--tds-radio-font-size);
892
+ font-weight:var(--t-font-weight-normal);
893
+ color:var(--tds-radio-label-color);
894
+ cursor:var(--tds-radio-cursor);
895
+ }
896
+
897
+ .tds-radio input[type="radio"]{
898
+ position:relative;
899
+ width:1em;
900
+ height:1em;
901
+ margin:calc((1lh - 1em) / 2) 0 0;
902
+ font-size:var(--tds-radio-font-size);
903
+ line-height:inherit;
904
+ -webkit-appearance:none;
905
+ -moz-appearance:none;
906
+ appearance:none;
907
+ cursor:var(--tds-radio-cursor);
908
+ background-color:var(--tds-radio-input-background-color);
909
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
910
+ border-radius:var(--tds-radio-input-border-radius);
911
+ transition-timing-function:var(--t-ease-in-out);
912
+ transition-duration:var(--t-duration-200);
913
+ transition-property:var(--tds-radio-transition-property);
914
+ }
915
+
916
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
917
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
918
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
919
+ }
920
+
921
+ :is(.tds-radio input[type="radio"]):focus-visible{
922
+ outline:var(--t-focus-ring-outline);
923
+ outline-offset:var(--t-focus-ring-offset);
924
+ }
925
+
926
+ :is(.tds-radio input[type="radio"]):disabled{
927
+ pointer-events:none;
928
+ }
929
+
930
+ @media (prefers-reduced-motion: reduce){
931
+
932
+ .tds-radio input[type="radio"]{
933
+ --tds-radio-transition-property:none;
934
+ }
935
+ }
936
+
937
+ .tds-radio:has(input:checked){
938
+ --tds-radio-input-background-color:var(--t-form-background-color);
939
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
940
+ --tds-radio-input-border-width:4px;
941
+ }
942
+
943
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
944
+ --tds-radio-input-background-color:var(--t-form-background-color);
945
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
946
+ }
947
+
948
+ .tds-radio:has(input:user-invalid){
949
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
950
+ }
951
+
952
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
953
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
954
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
955
+ }
956
+
957
+ .tds-radio:has(input:disabled){
958
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
959
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
960
+
961
+ --tds-radio-label-color:var(--t-form-color-disabled);
962
+ --tds-radio-description-color:var(--t-form-color-disabled);
963
+ --tds-radio-cursor:not-allowed;
964
+ }
965
+
966
+ .tds-radio:has(input:disabled) input:checked{
967
+ --tds-radio-input-background-color:var(--t-form-background-color);
968
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
969
+ }
970
+
971
+ .tds-radio-description{
972
+ display:flex;
973
+ grid-area:2 / 2;
974
+ gap:var(--t-spacing-half);
975
+ align-items:flex-start;
976
+ margin:0;
977
+ font-size:var(--tds-radio-description-font-size);
978
+ line-height:var(--tds-radio-description-line-height);
979
+ color:var(--tds-radio-description-color);
980
+ cursor:text;
981
+ }
982
+
983
+ .tds-radio--sm{
984
+ --tds-radio-line-height:1.35;
985
+ --tds-radio-input-size:var(--t-element-size-sm);
986
+ --tds-radio-font-size:var(--t-font-size-sm);
987
+ --tds-radio-description-font-size:var(--t-font-size-xs);
988
+ --tds-radio-description-line-height:1.3;
989
+ }
990
+
991
+ .tds-radio-group{
992
+ --tds-radio-group-font-size:var(--t-font-size-md);
993
+ --tds-radio-group-line-height:1.4;
994
+ --tds-radio-group-gap:var(--t-spacing-1);
995
+
996
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
997
+
998
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
999
+ --tds-radio-group-description-line-height:1.35;
1000
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1001
+ --tds-radio-group-description-invalid-icon-display:none;
1002
+ display:flex;
1003
+ flex-direction:column;
1004
+ gap:var(--tds-radio-group-gap);
1005
+ padding:0;
1006
+ margin:0;
1007
+
1008
+ font-size:var(--tds-radio-group-font-size);
1009
+ line-height:var(--tds-radio-group-line-height);
1010
+ border:0;
1011
+ }
1012
+
1013
+ .tds-radio-group legend{
1014
+ padding:0;
1015
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1016
+ }
1017
+
1018
+ .tds-radio-group:has(.tds-radio-group-description){
1019
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1135
1020
  }
1136
1021
 
1137
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1138
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1139
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1140
- --tds-checkbox-description-invalid-icon-display:inline-block;
1022
+ .tds-radio-group[aria-invalid="true"]{
1023
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1024
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1141
1025
  }
1142
1026
 
1143
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1144
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1145
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1027
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1028
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1146
1029
  }
1147
1030
 
1148
- :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{
1149
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1150
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1151
- }
1031
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1032
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1033
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1034
+ }
1152
1035
 
1153
- :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){
1154
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1155
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1036
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1037
+ --tds-radio-input-background-color:var(--t-form-background-color);
1156
1038
  }
1157
1039
 
1158
- .tds-checkbox:has(input:required) label::after{
1040
+ .tds-radio-group:has(input:required) legend::after{
1159
1041
  margin-left:.25ch;
1160
1042
  color:var(--t-text-color-status-error);
1161
1043
  content:"*";
1162
1044
  }
1163
1045
 
1164
- .tds-checkbox:has(input:disabled){
1165
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1166
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1167
-
1168
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1169
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1170
- --tds-checkbox-cursor:not-allowed;
1171
- }
1172
-
1173
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1174
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1175
- }
1046
+ .tds-radio-group-fields{
1047
+ display:flex;
1048
+ flex-direction:column;
1049
+ gap:var(--tds-radio-group-gap);
1050
+ align-items:flex-start;
1051
+ }
1176
1052
 
1177
- .tds-checkbox-description{
1053
+ .tds-radio-group-description{
1178
1054
  display:flex;
1179
- grid-area:2 / 2;
1180
1055
  gap:var(--t-spacing-half);
1181
1056
  align-items:flex-start;
1182
1057
  margin:0;
1183
- font-size:var(--tds-checkbox-description-font-size);
1184
- line-height:var(--tds-checkbox-description-line-height);
1185
- color:var(--tds-checkbox-description-color);
1058
+ font-size:var(--tds-radio-group-description-font-size);
1059
+ line-height:var(--tds-radio-group-description-line-height);
1060
+ color:var(--tds-radio-group-description-color);
1186
1061
  cursor:text;
1187
1062
  }
1188
1063
 
1189
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1190
- display:var(--tds-checkbox-description-invalid-icon-display);
1064
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1065
+ display:var(--tds-radio-group-description-invalid-icon-display);
1191
1066
  flex-shrink:0;
1192
1067
  margin-top:calc(.5lh - .5em);
1193
- line-height:var(--tds-checkbox-description-line-height);
1068
+ line-height:var(--tds-radio-group-description-line-height);
1194
1069
  }
1195
1070
 
1196
- .tds-checkbox--sm{
1197
- --tds-checkbox-line-height:1.35;
1198
- --tds-checkbox-input-size:var(--t-element-size-sm);
1199
- --tds-checkbox-font-size:var(--t-font-size-sm);
1200
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1201
- --tds-checkbox-description-line-height:1.3;
1071
+ .tds-radio-group--sm{
1072
+ --tds-radio-group-line-height:1.35;
1073
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1074
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1075
+ --tds-radio-group-description-line-height:1.3;
1202
1076
  }
1203
1077
 
1204
- .tds-input:has(textarea){
1205
- --tds-input-padding-block:6px;
1206
- --tds-input-resizer-size:var(--t-element-size-sm);
1207
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1208
- }
1078
+ .tds-toggle-switch{
1079
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1080
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1081
+ --tds-toggle-switch-cursor:pointer;
1082
+ --tds-toggle-switch-display:inline-grid;
1083
+ --tds-toggle-switch-line-height:1.4;
1209
1084
 
1210
- @supports (x: attr(x type(*))){
1085
+ --tds-toggle-switch-label-color:var(--t-form-color);
1211
1086
 
1212
- .tds-input:has(textarea){
1213
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1214
- }
1215
- }
1087
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1088
+ --tds-toggle-switch-track-outline:none;
1089
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1090
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1091
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1216
1092
 
1217
- .tds-input.tds-textarea--resize-vertical textarea{
1218
- resize:vertical;
1219
- }
1093
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1094
+ --tds-toggle-switch-thumb-transform:translateX(0);
1095
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1220
1096
 
1221
- .tds-input.tds-textarea--resize-none textarea{
1222
- resize:none;
1223
- }
1097
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1098
+ --tds-toggle-switch-description-line-height:1.35;
1099
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1100
+ position:relative;
1224
1101
 
1225
- .tds-input.tds-textarea--resize-auto textarea{
1226
- resize:vertical;
1227
- }
1102
+ display:var(--tds-toggle-switch-display);
1103
+ grid-template-columns:auto;
1104
+ grid-auto-columns:1fr;
1105
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1106
+ -webkit-user-select:none;
1107
+ -moz-user-select:none;
1108
+ user-select:none;
1109
+ }
1228
1110
 
1229
- @supports (field-sizing: content){
1230
- .tds-input.tds-textarea--resize-auto textarea{
1231
- field-sizing:content;
1232
- resize:none;
1233
- }
1111
+ .tds-toggle-switch input[type="checkbox"]{
1112
+ position:absolute;
1113
+ width:var(--tds-toggle-switch-track-width);
1114
+ height:var(--tds-toggle-switch-track-height);
1115
+ margin:0;
1116
+ -webkit-appearance:none;
1117
+ -moz-appearance:none;
1118
+ appearance:none;
1119
+ cursor:var(--tds-toggle-switch-cursor);
1120
+ outline:var(--tds-toggle-switch-track-outline);
1121
+ outline-offset:var(--t-focus-ring-offset);
1122
+ background-color:transparent;
1123
+ border:0;
1124
+ border-radius:var(--t-border-radius-round);
1125
+ }
1126
+
1127
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1128
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1234
1129
  }
1235
1130
 
1236
- .tds-input textarea{
1237
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1238
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1239
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1240
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1241
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1242
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1243
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1244
- --tds-input-scrollbar-thumb-border-radius:999px;
1245
- --tds-input-scrollbar-thumb-border-width:3px;
1246
- --tds-input-scrollbar-track-margin-block:.125rem;
1247
- scrollbar-color:initial;
1248
- transition-timing-function:var(--t-ease-in-out);
1249
- transition-duration:var(--t-duration-200);
1250
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1251
- }
1131
+ .tds-toggle-switch label{
1132
+ display:inline-flex;
1133
+ grid-area:1 / 2;
1134
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1135
+ column-gap:var(--tds-toggle-switch-column-gap);
1136
+ margin-top:-.09375em;
1137
+ font-size:var(--tds-toggle-switch-font-size);
1138
+ font-weight:var(--t-font-weight-normal);
1139
+ line-height:var(--tds-toggle-switch-line-height);
1140
+ color:var(--tds-toggle-switch-label-color);
1141
+ cursor:var(--tds-toggle-switch-cursor);
1142
+ }
1252
1143
 
1253
- @media (pointer: fine){
1254
- :is(.tds-input textarea)::-webkit-scrollbar{
1255
- width:12px;
1256
- height:12px;
1257
- cursor:default;
1258
- }
1144
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1145
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1146
+ }
1259
1147
 
1260
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1261
- cursor:default;
1262
- background:var(--tds-input-scrollbar-thumb-color);
1263
- background-clip:content-box;
1264
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1265
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1266
- }
1148
+ .tds-toggle-switch:has(input:checked){
1149
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1150
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1151
+ }
1267
1152
 
1268
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1269
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1153
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1154
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1270
1155
  }
1271
1156
 
1272
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1273
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1274
- }
1157
+ .tds-toggle-switch:has(input:disabled){
1158
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1159
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1160
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1161
+ --tds-toggle-switch-cursor:not-allowed;
1162
+ }
1275
1163
 
1276
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1277
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1278
- }
1164
+ .tds-toggle-switch-track{
1165
+ position:relative;
1166
+ flex-shrink:0;
1167
+ width:var(--tds-toggle-switch-track-width);
1168
+ height:var(--tds-toggle-switch-track-height);
1169
+ background-color:var(--tds-toggle-switch-track-background-color);
1170
+ border-radius:var(--t-border-radius-round);
1171
+ transition:var(--tds-toggle-switch-track-transition);
1172
+ }
1279
1173
 
1280
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1281
- background:var(--tds-input-scrollbar-surface-color);
1282
- }
1174
+ .tds-toggle-switch-track::before{
1175
+ position:absolute;
1176
+ top:var(--t-spacing-fourth);
1177
+ left:var(--t-spacing-fourth);
1178
+ width:var(--tds-toggle-switch-thumb-size);
1179
+ height:var(--tds-toggle-switch-thumb-size);
1180
+ content:"";
1181
+ background-color:#fff;
1182
+ border-radius:var(--t-border-radius-round);
1183
+ transform:var(--tds-toggle-switch-thumb-transform);
1184
+ transition:var(--tds-toggle-switch-thumb-transition);
1185
+ }
1283
1186
 
1284
- :is(.tds-input textarea)::-webkit-resizer{
1285
- background:var(--tds-input-resizer-icon) no-repeat;
1286
- background-position:right bottom;
1287
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1288
- }
1187
+ @media (prefers-reduced-motion: reduce){
1289
1188
 
1290
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1291
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1292
- cursor:default;
1293
- }
1189
+ .tds-toggle-switch-track{
1190
+ --tds-toggle-switch-track-transition:none;
1191
+ --tds-toggle-switch-thumb-transition:none;
1192
+ }
1193
+ }
1194
+
1195
+ .tds-toggle-switch-description{
1196
+ display:flex;
1197
+ grid-area:2 / 2;
1198
+ align-items:flex-start;
1199
+ margin:0;
1200
+ font-size:var(--tds-toggle-switch-description-font-size);
1201
+ line-height:var(--tds-toggle-switch-description-line-height);
1202
+ color:var(--tds-toggle-switch-description-color);
1203
+ cursor:text;
1204
+ }
1294
1205
 
1295
- @supports (-moz-appearance: none){
1296
- :is(.tds-input textarea){
1297
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1298
- scrollbar-width:thin;
1299
- }
1206
+ .tds-toggle-switch--sm{
1207
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1208
+ --tds-toggle-switch-line-height:1.35;
1209
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1210
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1211
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1212
+ --tds-toggle-switch-description-line-height:1.3;
1213
+ }
1300
1214
 
1301
- @media (hover){
1302
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1303
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1304
- }
1305
- }
1306
- }
1307
- }
1215
+ .tds-toggle-switch--hide-label{
1216
+ --tds-toggle-switch-display:inline-flex;
1217
+ }
1308
1218
 
1309
1219
  .tds-select{
1310
1220
  --tds-select-border-color:var(--t-form-border-color);
@@ -1740,6 +1650,111 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1740
1650
  }
1741
1651
  }
1742
1652
 
1653
+ .tds-input:has(textarea){
1654
+ --tds-input-padding-block:6px;
1655
+ --tds-input-resizer-size:var(--t-element-size-sm);
1656
+ --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");
1657
+ }
1658
+
1659
+ @supports (x: attr(x type(*))){
1660
+
1661
+ .tds-input:has(textarea){
1662
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1663
+ }
1664
+ }
1665
+
1666
+ .tds-input.tds-textarea--resize-vertical textarea{
1667
+ resize:vertical;
1668
+ }
1669
+
1670
+ .tds-input.tds-textarea--resize-none textarea{
1671
+ resize:none;
1672
+ }
1673
+
1674
+ .tds-input.tds-textarea--resize-auto textarea{
1675
+ resize:vertical;
1676
+ }
1677
+
1678
+ @supports (field-sizing: content){
1679
+ .tds-input.tds-textarea--resize-auto textarea{
1680
+ field-sizing:content;
1681
+ resize:none;
1682
+ }
1683
+ }
1684
+
1685
+ .tds-input textarea{
1686
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1687
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1688
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1689
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1690
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1691
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1692
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1693
+ --tds-input-scrollbar-thumb-border-radius:999px;
1694
+ --tds-input-scrollbar-thumb-border-width:3px;
1695
+ --tds-input-scrollbar-track-margin-block:.125rem;
1696
+ scrollbar-color:initial;
1697
+ transition-timing-function:var(--t-ease-in-out);
1698
+ transition-duration:var(--t-duration-200);
1699
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1700
+ }
1701
+
1702
+ @media (pointer: fine){
1703
+ :is(.tds-input textarea)::-webkit-scrollbar{
1704
+ width:12px;
1705
+ height:12px;
1706
+ cursor:default;
1707
+ }
1708
+
1709
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1710
+ cursor:default;
1711
+ background:var(--tds-input-scrollbar-thumb-color);
1712
+ background-clip:content-box;
1713
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1714
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1715
+ }
1716
+
1717
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1718
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1719
+ }
1720
+
1721
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1722
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1723
+ }
1724
+
1725
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1726
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1727
+ }
1728
+
1729
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1730
+ background:var(--tds-input-scrollbar-surface-color);
1731
+ }
1732
+
1733
+ :is(.tds-input textarea)::-webkit-resizer{
1734
+ background:var(--tds-input-resizer-icon) no-repeat;
1735
+ background-position:right bottom;
1736
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1737
+ }
1738
+
1739
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1740
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1741
+ cursor:default;
1742
+ }
1743
+
1744
+ @supports (-moz-appearance: none){
1745
+ :is(.tds-input textarea){
1746
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1747
+ scrollbar-width:thin;
1748
+ }
1749
+
1750
+ @media (hover){
1751
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1752
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1753
+ }
1754
+ }
1755
+ }
1756
+ }
1757
+
1743
1758
  .tds-input{
1744
1759
  --tds-input-border-color:var(--t-form-border-color);
1745
1760
  --tds-input-border-color-hover:var(--t-form-border-color-hover);
@@ -3613,223 +3628,75 @@ a[class="tds-btn"]{
3613
3628
  }
3614
3629
 
3615
3630
  .tds-combo-box-list{
3616
- padding:0;
3617
- margin:0;
3618
- }
3619
-
3620
- .tds-combo-box-list-item{
3621
- display:block;
3622
- padding-block:var(--t-spacing-1);
3623
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3624
- overflow:hidden;
3625
- text-overflow:ellipsis;
3626
- font-size:1rem;
3627
- color:var(--t-text-color);
3628
- white-space:nowrap;
3629
- cursor:default;
3630
- outline-offset:-1px;
3631
- border-radius:var(--t-border-radius);
3632
- }
3633
-
3634
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3635
- background:var(--t-fill-color-neutral-070);
3636
- }
3637
-
3638
- .tds-combo-box-list-item[data-selected]{
3639
- background:var(--t-fill-color-button-interaction-ghost-active);
3640
- }
3641
-
3642
- .tds-combo-box-list-item[data-focus-visible]{
3643
- outline:var(--t-focus-ring-outline);
3644
- outline-offset:-1px;
3645
- }
3646
-
3647
- .tds-combo-box-list-item[data-disabled]{
3648
- color:var(--t-form-color-disabled);
3649
- cursor:not-allowed;
3650
- }
3651
-
3652
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3653
- background:transparent;
3654
- }
3655
-
3656
- .tds-combo-box-list-section:not(:first-child){
3657
- margin-block-start:var(--t-spacing-half);
3658
- }
3659
-
3660
- .tds-combo-box-section-header{
3661
- padding-block:var(--t-spacing-1);
3662
- padding-inline:var(--t-spacing-1);
3663
- font-size:var(--t-font-size-sm);
3664
- font-weight:var(--t-font-weight-semibold);
3665
- color:var(--t-text-color-secondary);
3666
- }
3667
-
3668
- .tds-combo-box-description{
3669
- display:flex;
3670
- gap:var(--t-spacing-half);
3671
- align-items:flex-start;
3672
- margin:0;
3673
- font-size:var(--t-font-size-sm);
3674
- line-height:1.35;
3675
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3676
- cursor:text;
3677
- }
3678
-
3679
- .tds-combo-box-description-invalid-icon{
3680
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3681
- flex-shrink:0;
3682
- margin-block-start:calc(.5lh - .5em);
3683
- line-height:1.35;
3684
- }
3685
-
3686
- .tds-time-field{
3687
- --tds-time-field-border-color:var(--t-form-border-color);
3688
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3689
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3690
- --tds-time-field-background-color:var(--t-form-background-color);
3691
- --tds-time-field-color:var(--t-form-color);
3692
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3693
- --tds-time-field-font-size:var(--t-font-size-md);
3694
- --tds-time-field-min-height:var(--t-container-size-md);
3695
- --tds-time-field-padding-block:6px;
3696
- --tds-time-field-description-color:var(--t-text-color-secondary);
3697
- --tds-time-field-description-invalid-icon-display:none;
3698
-
3699
- position:relative;
3700
- display:flex;
3701
- flex-direction:column;
3702
- gap:var(--t-spacing-half);
3703
- }
3704
-
3705
- .tds-time-field[data-required] .tds-time-field-label::after{
3706
- margin-left:.25ch;
3707
- color:var(--t-text-color-status-error);
3708
- content:"*";
3709
- }
3710
-
3711
- .tds-time-field[data-invalid]{
3712
- --tds-time-field-border-color:var(--t-form-border-color-error);
3713
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3714
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3715
- --tds-time-field-background-color:var(--t-form-background-color-error);
3716
- --tds-time-field-description-color:var(--t-text-color-status-error);
3717
- --tds-time-field-description-invalid-icon-display:inline-block;
3718
- }
3719
-
3720
- .tds-time-field[data-disabled]{
3721
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3722
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3723
- --tds-time-field-color:var(--t-form-color-disabled);
3724
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3725
- }
3726
-
3727
- .tds-time-field[data-disabled] .tds-time-field-label{
3728
- color:var(--t-form-color-disabled);
3729
- }
3730
-
3731
- .tds-time-field[data-disabled] .tds-time-field-input{
3732
- cursor:not-allowed;
3733
- }
3734
-
3735
- .tds-time-field--lg{
3736
- --tds-time-field-min-height:var(--t-container-size-lg);
3737
- --tds-time-field-font-size:var(--t-font-size-lg);
3631
+ padding:0;
3632
+ margin:0;
3738
3633
  }
3739
3634
 
3740
- .tds-time-field-label{
3741
- font-size:var(--t-font-size-md);
3742
- font-weight:var(--t-font-weight-normal);
3635
+ .tds-combo-box-list-item{
3636
+ display:block;
3637
+ padding-block:var(--t-spacing-1);
3638
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3639
+ overflow:hidden;
3640
+ text-overflow:ellipsis;
3641
+ font-size:1rem;
3743
3642
  color:var(--t-text-color);
3643
+ white-space:nowrap;
3744
3644
  cursor:default;
3645
+ outline-offset:-1px;
3646
+ border-radius:var(--t-border-radius);
3745
3647
  }
3746
3648
 
3747
- .tds-time-field-input{
3748
- display:flex;
3749
- align-items:center;
3750
- inline-size:100%;
3751
- min-block-size:var(--tds-time-field-min-height);
3752
- padding-block:var(--tds-time-field-padding-block);
3753
- padding-inline:var(--t-spacing-1);
3754
- font-family:inherit;
3755
- font-size:var(--tds-time-field-font-size);
3756
- font-variant-numeric:tabular-nums;
3757
- line-height:1;
3758
- color:var(--tds-time-field-color);
3759
- cursor:text;
3760
- outline:var(--t-focus-ring-width) solid transparent;
3761
- outline-offset:0;
3762
- background-color:var(--tds-time-field-background-color);
3763
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3764
- border-radius:var(--t-form-border-radius);
3765
- }
3766
-
3767
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3768
- border-color:var(--tds-time-field-border-color-hover);
3649
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3650
+ background:var(--t-fill-color-neutral-070);
3769
3651
  }
3770
3652
 
3771
- .tds-time-field-input[data-focus-within]{
3772
- outline-color:var(--t-focus-ring-color);
3773
- outline-offset:var(--t-focus-ring-offset);
3774
- border-color:var(--tds-time-field-border-color-active);
3653
+ .tds-combo-box-list-item[data-selected]{
3654
+ background:var(--t-fill-color-button-interaction-ghost-active);
3775
3655
  }
3776
3656
 
3777
- .tds-time-field-input[data-readonly]{
3778
- color:var(--t-form-color-readonly);
3779
- background-color:var(--t-form-background-color-readonly);
3780
- border-color:var(--t-form-border-color-readonly);
3657
+ .tds-combo-box-list-item[data-focus-visible]{
3658
+ outline:var(--t-focus-ring-outline);
3659
+ outline-offset:-1px;
3781
3660
  }
3782
3661
 
3783
- .tds-time-field-input[data-readonly][data-hovered]{
3784
- border-color:var(--t-form-border-color-readonly);
3785
- }
3662
+ .tds-combo-box-list-item[data-disabled]{
3663
+ color:var(--t-form-color-disabled);
3664
+ cursor:not-allowed;
3665
+ }
3786
3666
 
3787
- .tds-time-field-input[data-readonly][data-focus-within]{
3788
- outline-color:var(--t-focus-ring-color);
3789
- outline-offset:var(--t-focus-ring-offset);
3790
- border-color:var(--t-form-border-color-hover);
3667
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3668
+ background:transparent;
3791
3669
  }
3792
3670
 
3793
- .tds-time-field-segment{
3794
- padding-inline:1px;
3795
- font-variant-numeric:tabular-nums;
3796
- cursor:text;
3797
- caret-color:transparent;
3798
- border-radius:var(--t-border-radius-sm);
3799
- }
3800
-
3801
- .tds-time-field-segment[data-placeholder]{
3802
- color:var(--tds-time-field-placeholder-color);
3803
- }
3804
-
3805
- .tds-time-field-segment[data-focused]{
3806
- color:var(--t-text-color-inverted);
3807
- outline:0;
3808
- background:var(--t-fill-color-interaction);
3671
+ .tds-combo-box-list-section:not(:first-child){
3672
+ margin-block-start:var(--t-spacing-half);
3809
3673
  }
3810
3674
 
3811
- .tds-time-field-segment-separator{
3812
- padding-inline:0;
3813
- color:var(--tds-time-field-placeholder-color);
3675
+ .tds-combo-box-section-header{
3676
+ padding-block:var(--t-spacing-1);
3677
+ padding-inline:var(--t-spacing-1);
3678
+ font-size:var(--t-font-size-sm);
3679
+ font-weight:var(--t-font-weight-semibold);
3680
+ color:var(--t-text-color-secondary);
3814
3681
  }
3815
3682
 
3816
- .tds-time-field-description{
3683
+ .tds-combo-box-description{
3817
3684
  display:flex;
3818
3685
  gap:var(--t-spacing-half);
3819
3686
  align-items:flex-start;
3820
3687
  margin:0;
3821
3688
  font-size:var(--t-font-size-sm);
3822
3689
  line-height:1.35;
3823
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3690
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3824
3691
  cursor:text;
3825
3692
  }
3826
3693
 
3827
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3828
- display:var(--tds-time-field-description-invalid-icon-display, none);
3829
- flex-shrink:0;
3830
- margin-block-start:calc(.5lh - .5em);
3831
- line-height:1.35;
3832
- }
3694
+ .tds-combo-box-description-invalid-icon{
3695
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3696
+ flex-shrink:0;
3697
+ margin-block-start:calc(.5lh - .5em);
3698
+ line-height:1.35;
3699
+ }
3833
3700
 
3834
3701
  .tds-date-picker{
3835
3702
  --tds-date-picker-border-color:var(--t-form-border-color);
@@ -4423,6 +4290,154 @@ a[class="tds-btn"]{
4423
4290
  line-height:1.35;
4424
4291
  }
4425
4292
 
4293
+ .tds-time-field{
4294
+ --tds-time-field-border-color:var(--t-form-border-color);
4295
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4296
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4297
+ --tds-time-field-background-color:var(--t-form-background-color);
4298
+ --tds-time-field-color:var(--t-form-color);
4299
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4300
+ --tds-time-field-font-size:var(--t-font-size-md);
4301
+ --tds-time-field-min-height:var(--t-container-size-md);
4302
+ --tds-time-field-padding-block:6px;
4303
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4304
+ --tds-time-field-description-invalid-icon-display:none;
4305
+
4306
+ position:relative;
4307
+ display:flex;
4308
+ flex-direction:column;
4309
+ gap:var(--t-spacing-half);
4310
+ }
4311
+
4312
+ .tds-time-field[data-required] .tds-time-field-label::after{
4313
+ margin-left:.25ch;
4314
+ color:var(--t-text-color-status-error);
4315
+ content:"*";
4316
+ }
4317
+
4318
+ .tds-time-field[data-invalid]{
4319
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4320
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4321
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4322
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4323
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4324
+ --tds-time-field-description-invalid-icon-display:inline-block;
4325
+ }
4326
+
4327
+ .tds-time-field[data-disabled]{
4328
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4329
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4330
+ --tds-time-field-color:var(--t-form-color-disabled);
4331
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4332
+ }
4333
+
4334
+ .tds-time-field[data-disabled] .tds-time-field-label{
4335
+ color:var(--t-form-color-disabled);
4336
+ }
4337
+
4338
+ .tds-time-field[data-disabled] .tds-time-field-input{
4339
+ cursor:not-allowed;
4340
+ }
4341
+
4342
+ .tds-time-field--lg{
4343
+ --tds-time-field-min-height:var(--t-container-size-lg);
4344
+ --tds-time-field-font-size:var(--t-font-size-lg);
4345
+ }
4346
+
4347
+ .tds-time-field-label{
4348
+ font-size:var(--t-font-size-md);
4349
+ font-weight:var(--t-font-weight-normal);
4350
+ color:var(--t-text-color);
4351
+ cursor:default;
4352
+ }
4353
+
4354
+ .tds-time-field-input{
4355
+ display:flex;
4356
+ align-items:center;
4357
+ inline-size:100%;
4358
+ min-block-size:var(--tds-time-field-min-height);
4359
+ padding-block:var(--tds-time-field-padding-block);
4360
+ padding-inline:var(--t-spacing-1);
4361
+ font-family:inherit;
4362
+ font-size:var(--tds-time-field-font-size);
4363
+ font-variant-numeric:tabular-nums;
4364
+ line-height:1;
4365
+ color:var(--tds-time-field-color);
4366
+ cursor:text;
4367
+ outline:var(--t-focus-ring-width) solid transparent;
4368
+ outline-offset:0;
4369
+ background-color:var(--tds-time-field-background-color);
4370
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4371
+ border-radius:var(--t-form-border-radius);
4372
+ }
4373
+
4374
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4375
+ border-color:var(--tds-time-field-border-color-hover);
4376
+ }
4377
+
4378
+ .tds-time-field-input[data-focus-within]{
4379
+ outline-color:var(--t-focus-ring-color);
4380
+ outline-offset:var(--t-focus-ring-offset);
4381
+ border-color:var(--tds-time-field-border-color-active);
4382
+ }
4383
+
4384
+ .tds-time-field-input[data-readonly]{
4385
+ color:var(--t-form-color-readonly);
4386
+ background-color:var(--t-form-background-color-readonly);
4387
+ border-color:var(--t-form-border-color-readonly);
4388
+ }
4389
+
4390
+ .tds-time-field-input[data-readonly][data-hovered]{
4391
+ border-color:var(--t-form-border-color-readonly);
4392
+ }
4393
+
4394
+ .tds-time-field-input[data-readonly][data-focus-within]{
4395
+ outline-color:var(--t-focus-ring-color);
4396
+ outline-offset:var(--t-focus-ring-offset);
4397
+ border-color:var(--t-form-border-color-hover);
4398
+ }
4399
+
4400
+ .tds-time-field-segment{
4401
+ padding-inline:1px;
4402
+ font-variant-numeric:tabular-nums;
4403
+ cursor:text;
4404
+ caret-color:transparent;
4405
+ border-radius:var(--t-border-radius-sm);
4406
+ }
4407
+
4408
+ .tds-time-field-segment[data-placeholder]{
4409
+ color:var(--tds-time-field-placeholder-color);
4410
+ }
4411
+
4412
+ .tds-time-field-segment[data-focused]{
4413
+ color:var(--t-text-color-inverted);
4414
+ outline:0;
4415
+ background:var(--t-fill-color-interaction);
4416
+ }
4417
+
4418
+ .tds-time-field-segment-separator{
4419
+ padding-inline:0;
4420
+ color:var(--tds-time-field-placeholder-color);
4421
+ }
4422
+
4423
+ .tds-time-field-description{
4424
+ display:flex;
4425
+ gap:var(--t-spacing-half);
4426
+ align-items:flex-start;
4427
+ margin:0;
4428
+ font-size:var(--t-font-size-sm);
4429
+ line-height:1.35;
4430
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4431
+ cursor:text;
4432
+ }
4433
+
4434
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4435
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4436
+ flex-shrink:0;
4437
+ margin-block-start:calc(.5lh - .5em);
4438
+ line-height:1.35;
4439
+ }
4440
+
4426
4441
  .t-banner{
4427
4442
  --t-banner-font-size:var(--t-font-size-md);
4428
4443
  --t-banner-font-color:var(--t-text-color);